:root{
  --bg:#f4f5f7;
  --panel:#ffffff;
  --panel-2:#fafbfc;
  --text:#1c1f23;
  --muted:#6b7280;
  --line:#e3e6ea;
  --accent:#2563eb;
  --accent-soft:#e8effd;
  --danger:#dc2626;
  --ok:#16a34a;
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#14171a;
    --panel:#1c2025;
    --panel-2:#22272d;
    --text:#e6e9ed;
    --muted:#98a2b3;
    --line:#2d333b;
    --accent:#5b8cf5;
    --accent-soft:#22304d;
    --danger:#f0656a;
    --ok:#4ade80;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.30);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------- элементы управления ---------- */
.btn{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 12px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .12s, border-color .12s;
}
.btn:hover{background:var(--panel-2);border-color:var(--muted)}
.btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.07)}
.btn.danger{color:var(--danger)}
.btn.danger:hover{border-color:var(--danger)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted);padding:6px 8px}
.btn.ghost:hover{background:var(--panel-2);color:var(--text)}

.field{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 10px;
  outline:none;
  min-width:0;
  max-width:100%;
}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.field{resize:vertical;min-height:80px;width:100%}

/* ---------- вход ---------- */
.login{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:var(--bg);
}
.login-box{
  width:100%;max-width:340px;
  display:flex;flex-direction:column;gap:12px;
  background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:24px;box-shadow:var(--shadow);
}
.login-box h1{margin:0;font-size:18px;font-weight:650}
.login-hint{margin:0;color:var(--muted);font-size:13px}
.login-error{color:var(--danger);font-size:13px;min-height:18px}

/* ---------- верхняя панель ---------- */
.topbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 18px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.brand{font-weight:650;font-size:15px;letter-spacing:-.01em;margin-right:4px}
.spacer{flex:1}
#search{width:200px}
.seg{display:flex;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.seg button{background:transparent;border:0;padding:7px 14px;cursor:pointer;color:var(--muted)}
.seg button.active{background:var(--accent);color:#fff}

.status{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--muted);white-space:nowrap;
}
.status::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ok)}
.status.busy::before{background:#d97706}
.status.off::before{background:var(--danger)}

/* ---------- быстрое добавление ---------- */
.quickadd{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:12px 18px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
#qaTitle{flex:1;min-width:200px}

/* ---------- доска ---------- */
.wrap{padding:18px;max-width:1500px;margin:0 auto}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
@media (max-width:900px){.board{grid-template-columns:1fr}}

.col{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;flex-direction:column;min-height:120px;
}
.col-head{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.col-title{font-weight:600}
.count{
  margin-left:auto;color:var(--muted);font-size:12px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:20px;padding:1px 9px;
}
.col-body{padding:10px;display:flex;flex-direction:column;gap:9px;min-height:60px}
.col.dragover .col-body{background:var(--accent-soft);border-radius:8px}
.empty{color:var(--muted);text-align:center;padding:18px 8px;font-size:13px}

/* ---------- карточка ---------- */
.card{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-left:3px solid var(--line);
  border-radius:8px;
  padding:10px 11px;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .1s, border-color .12s;
}
.card:hover{border-color:var(--muted)}
.card:active{transform:scale(.995)}
.card.dragging{opacity:.4}
.card.p-high{border-left-color:#e11d48}
.card.p-mid{border-left-color:#d97706}
.card.p-low{border-left-color:#64748b}
.card.done .card-title{text-decoration:line-through;color:var(--muted)}
.card-title{font-weight:500;word-break:break-word}
.card-notes{
  color:var(--muted);font-size:12.5px;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag{
  font-size:11.5px;border-radius:20px;padding:1px 8px;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
}
.tag.proj{border-color:transparent;color:#fff}
.tag.due.soon{color:#b45309;border-color:#b45309}
.tag.due.over{color:var(--danger);border-color:var(--danger);font-weight:600}
.card-move{margin-left:auto;display:flex;gap:2px;opacity:0;transition:opacity .12s}
.card:hover .card-move{opacity:1}
.card-move button{
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
  border-radius:6px;width:26px;height:26px;line-height:1;cursor:pointer;padding:0;
}
.card-move button:hover{color:var(--text);border-color:var(--muted)}
.card-move button:disabled{opacity:.25;cursor:default}
@media (hover:none){.card-move{opacity:1}}

/* ---------- список ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.table{width:100%;border-collapse:collapse;min-width:560px}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
.table th{
  font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;
  letter-spacing:.03em;cursor:pointer;user-select:none;background:var(--panel-2);
  white-space:nowrap;
}
.table th:hover{color:var(--text)}
.table tbody tr{cursor:pointer}
.table tbody tr:hover{background:var(--panel-2)}
.table tr:last-child td{border-bottom:0}
.table td.t-title{font-weight:500}
.table tr.is-done td.t-title{text-decoration:line-through;color:var(--muted)}

/* ---------- модальные окна ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(10,12,16,.5);
  display:flex;align-items:flex-start;justify-content:center;
  padding:40px 16px;z-index:50;overflow:auto;
}
.modal{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  width:100%;max-width:520px;box-shadow:0 12px 40px rgba(0,0,0,.28);
}
.modal-head{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:15px;font-weight:650}
.modal-body{padding:18px;display:flex;flex-direction:column;gap:14px}
.modal-foot{display:flex;gap:8px;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.modal-foot .spacer{flex:1}
label.lab{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
label.lab .field{color:var(--text);font-size:14px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row{grid-template-columns:1fr}}

/* проекты */
.plist{display:flex;flex-direction:column;gap:8px}
.pitem{
  display:flex;align-items:center;gap:10px;padding:8px 10px;flex-wrap:wrap;
  border:1px solid var(--line);border-radius:8px;background:var(--panel-2);
}
.dot{width:12px;height:12px;border-radius:50%;flex:none}
.pitem .pname{flex:1;min-width:120px;background:transparent;border:0;outline:none;padding:2px 0}
.swatches{display:flex;gap:4px}
.sw{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.sw.on{border-color:var(--text)}

/* ---------- уведомление ---------- */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--text);color:var(--bg);
  padding:10px 16px;border-radius:8px;z-index:200;
  box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:90vw;
}
.toast.err{background:var(--danger);color:#fff}

.hidden{display:none !important}
.foot{padding:14px 18px 30px;color:var(--muted);font-size:12px;text-align:center}