#list{
  padding:20px;
  max-width:960px;
  margin:0 auto;
  transition:max-width .2s;
}
#list.two-cols{
  max-width:1400px;
  columns:2;
  column-gap:10px;
}
#list.two-cols .task{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  page-break-inside:avoid;
  margin-bottom:10px;
  display:flex;
}

.task{padding:16px 20px 16px 18px;margin-bottom:10px;
      display:flex;gap:14px;align-items:flex-start;
      background:var(--bg-elev-2);border-radius:var(--r-md);
      border:1px solid var(--border-soft);
      box-shadow:var(--shadow-sm);cursor:pointer;position:relative;
      transition:transform .12s ease, box-shadow .15s ease,
                 border-color .15s ease, padding .15s ease,
                 opacity .15s ease}
.task:hover{transform:translateY(-1px);
            box-shadow:var(--shadow-md);
            border-color:var(--border)}
.task::before{content:'';position:absolute;left:0;top:12px;bottom:12px;
              width:3px;border-radius:0 2px 2px 0;background:transparent}
.task[data-cx="-3"]::before,
.task[data-cx="-2"]::before{background:#4caf50}
.task[data-cx="-1"]::before{background:#7cc47f}
.task[data-cx="0"]::before{background:#c5c5c9}
.task[data-cx="1"]::before{background:#e09c5e}
.task[data-cx="2"]::before,
.task[data-cx="3"]::before{background:#e07a7a}

.task.is-busy{
  opacity: 0.7;
  pointer-events: none;
}

.task.done{opacity:.55}
.task.done h3{text-decoration:line-through;color:var(--text-muted);
              text-decoration-color:var(--text-dim)}

.task h3{margin:0 0 5px;font-size:15px;font-weight:600;
         line-height:1.35;color:var(--text);word-wrap:break-word;
         letter-spacing:-0.2px}
.task .summary{margin:0;font-size:13.5px;color:var(--text-muted);
               line-height:1.5;word-wrap:break-word}
.task .details-hint{margin:7px 0 0;font-size:11.5px;color:var(--text-dim);
                    letter-spacing:-0.05px}
.task input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin-top:3px;
     accent-color:var(--green);cursor:pointer;border-radius:4px}
.task .body{flex:1;min-width:0}

.task.compact{
  padding:11px 14px 11px 14px;
  margin-bottom:6px;
  align-items:center;
}
.task.compact::before{top:8px;bottom:8px}
.task.compact h3{margin:0;font-size:14px;font-weight:500}
.task.compact input[type=checkbox]{margin-top:0}
.task.compact .summary,
.task.compact .details-hint,
.task.compact .warn,
.task.compact .from-badge{display:none}
.task.compact .complexity{margin-left:6px}

.from-badge{display:inline-flex;align-items:center;gap:5px;
  font-size:11.5px;color:var(--blue);background:var(--blue-bg);
  padding:3px 9px;border-radius:var(--r-sm);margin-bottom:8px;
  max-width:100%;font-weight:500;letter-spacing:-0.05px}
.from-badge::before{content:"👤";font-size:10px;opacity:.8}
.from-badge .from-name{color:var(--blue);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

.complexity{display:inline-block;font-size:10.5px;font-weight:600;
  padding:2px 8px;border-radius:var(--r-sm);margin-left:8px;
  vertical-align:middle;font-variant-numeric:tabular-nums;
  min-width:26px;text-align:center;letter-spacing:-0.1px}
.complexity.c-3,.complexity.c-2{background:var(--green-bg);color:var(--green)}
.complexity.c-1{background:#f0f7f2;color:#3d8a5f}
.complexity.c0{background:var(--gray-badge);color:var(--text-muted)}
.complexity.c1{background:var(--orange-bg);color:var(--orange)}
.complexity.c2,.complexity.c3{background:var(--red-bg);color:var(--red)}

.due-badge{display:inline-flex;align-items:center;gap:4px;
  font-size:11px;color:var(--blue);background:var(--blue-bg);
  padding:2px 8px;border-radius:var(--r-sm);margin-left:6px;
  font-variant-numeric:tabular-nums;font-weight:500;letter-spacing:-0.05px;
  vertical-align:middle}
.due-badge::before{content:"📅";font-size:10px}
.due-badge.overdue{background:var(--red-bg);color:var(--red)}

.warn{display:inline-block;font-size:11.5px;color:var(--orange);
      background:var(--orange-bg);padding:3px 9px;border-radius:var(--r-sm);
      margin-top:8px;font-weight:500}

#empty{text-align:center;padding:80px 24px;color:var(--text-muted);
       font-size:14px;line-height:1.7}
#empty::before{content:"📥";display:block;font-size:40px;
               margin-bottom:14px;opacity:.6}

/* ==================== БЕЙДЖИ ПРОСТРАНСТВА ==================== */

.task .task-space-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: -0.05px;
  white-space: nowrap;
}
.task .task-space-badge.shared{
  background: var(--blue-bg);
  color: var(--blue);
}
.task .task-space-badge.assigned{
  background: var(--orange-bg);
  color: var(--orange);
}
.task .task-space-badge.incoming{
  background: var(--orange-bg);
  color: var(--orange);
}
.task .task-space-badge.returned{
  background: var(--red-bg);
  color: var(--red);
}

/* ==================== ПРАВАЯ ЗОНА ДЕЙСТВИЙ ==================== */

.task .task-right-actions{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding-left: 8px;
  flex-shrink: 0;
  align-self: center;
}

/* ==================== ПАРТИЯ 6.4: БЕЙДЖ ВЛОЖЕНИЙ ==================== */

.task-attach-badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  background: var(--bg-elev-4);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .08s;
  user-select: none;
  flex-shrink: 0;
}
.task-attach-badge:hover{
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green);
}
.task-attach-badge:active{
  transform: scale(.95);
}
.task-attach-badge svg{
  width: 13px;
  height: 13px;
  display: block;
  flex-shrink: 0;
}

.task.compact .task-attach-badge{
  padding: 3px 7px;
  font-size: 10px;
}
.task.compact .task-attach-badge svg{
  width: 11px;
  height: 11px;
}

body.selection-active .task-attach-badge{
  pointer-events: none;
  opacity: 0.5;
}

/* ==================== БЫСТРЫЕ КНОПКИ НА КАРТОЧКЕ ==================== */

.task .task-quick-actions{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
}

.task .quick-action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .15s, color .15s, transform .08s;
  background: transparent;
  color: var(--text-dim);
  align-self: center;
}
.task .quick-action-btn svg{
  width: 18px;
  height: 18px;
  display: block;
}
.task .quick-action-btn:active{ transform: scale(.92); }
.task .quick-action-btn:disabled{ opacity: .4; cursor: default; }

.task .quick-action-btn.share-btn{ color: #d94a4a; }
.task .quick-action-btn.share-btn:hover{
  background: var(--red-bg);
  color: var(--red);
}
.task .quick-action-btn.take-btn{ color: var(--green); }
.task .quick-action-btn.take-btn:hover{
  background: var(--green-bg);
  color: var(--green-hover);
}

.task.compact .task-quick-actions{ gap: 2px; }
.task.compact .quick-action-btn{ width: 28px; height: 28px; }
.task.compact .quick-action-btn svg{ width: 16px; height: 16px; }

/* ==================== ПЕРЕКЛЮЧАТЕЛЬ СТАТУСА ПЕРЕДАННЫХ ==================== */

.transferred-switcher{
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--bg-elev-4);
  border-radius: var(--r-sm);
  margin-bottom: 16px;
}

.transferred-tab{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: transparent;
  color: var(--text-muted);
  border: 0;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.1px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.transferred-tab:hover{ color: var(--text); }
.transferred-tab.active{
  background: var(--bg-elev-2);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.transferred-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--bg-elev-4);
  color: var(--text-muted);
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.transferred-tab.active .transferred-count{
  background: var(--green-bg);
  color: var(--green);
}

/* ==================== ГРУППЫ ЗАДАЧ ==================== */

.task-group{ margin-bottom: 24px; }
.task-group:last-child{ margin-bottom: 0; }

.task-group-header{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  margin-bottom: 10px;
  background: var(--bg-elev-4);
  border-radius: var(--r-md);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .3px;
  user-select: none;
}
.task-group-header .group-icon{ font-size: 13px; opacity: .8; }
.task-group-header .group-label{
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-group-header .group-count{
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-elev-2);
  padding: 2px 8px;
  border-radius: 10px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.task-group-header.is-today{
  background: var(--green-bg);
  color: var(--green);
}
.task-group-header.is-today .group-count{
  background: rgba(255,255,255,0.6);
  color: var(--green);
}
.task-group-header.is-yesterday{
  background: var(--orange-bg);
  color: var(--orange);
}
.task-group-header.is-yesterday .group-count{
  background: rgba(255,255,255,0.6);
  color: var(--orange);
}

#list.two-cols .task-group{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
#list.two-cols .task-group-header{ column-span: none; }

/* ==================== ПАРТИЯ 7: РЕЖИМ ВЫБОРА ДЛЯ СЛИЯНИЯ ==================== */

.task.selected{
  background: #fff8e1 !important;
  border-color: #f0c060 !important;
  box-shadow: 0 0 0 3px rgba(240,192,96,0.35), var(--shadow-sm) !important;
}

.task.merge-primary{
  background: var(--green-bg) !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(45,134,89,0.25), var(--shadow-sm) !important;
}

body.selection-active .task{
  cursor: pointer;
}
body.selection-active .task input[type=checkbox]{
  display: none;
}
body.selection-active .task-quick-actions{
  display: none;
}

.task.merge-primary::after{
  content: '★';
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 16px;
  color: var(--green);
  z-index: 2;
  pointer-events: none;
}

/* Панель выбора — плавающая снизу */
.selection-bar{
  position: fixed;
  bottom: calc(24px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
}
.selection-bar.hidden{
  display: none;
}

.selection-info{
  white-space: nowrap;
}
.selection-info span{
  font-weight: 700;
  color: var(--green);
  margin-right: 2px;
}

.selection-actions{
  display: flex;
  gap: 8px;
}

.selection-btn{
  padding: 8px 16px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 0;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
  min-height: 40px;
}
.selection-btn:hover{ background: rgba(255,255,255,0.2); }
.selection-btn.primary{
  background: var(--green);
  color: #fff;
}
.selection-btn.primary:hover{ background: var(--green-hover); }
.selection-btn.primary:disabled{
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.4);
  cursor: default;
}

@media (max-width:900px){
  #list.two-cols{columns:1;max-width:960px}
}

/* C.1: отступы меньше на мобильном */
@media (max-width:640px){
  /* C.2b-fix: большой отступ снизу, чтобы последняя карточка
     не уходила под фиксированную нижнюю панель + FAB */
  #list{
    padding: 12px 12px calc(160px + var(--safe-bottom)) 12px;
  }
  .task{padding:12px 14px 12px 14px; gap: 12px;}
  .task::before{top: 10px; bottom: 10px;}
  .task h3{font-size: 14.5px;}
  .task .summary{font-size: 13px;}
}

@media (max-width:500px){
  #list{
    padding: 10px 10px calc(170px + var(--safe-bottom)) 10px;
  }
  .task{padding: 11px 12px 11px 12px; gap: 10px;}
  .task input[type=checkbox]{width: 20px; height: 20px; margin-top: 2px;}
  .task .quick-action-btn{ width: 40px; height: 40px; }
  .task .quick-action-btn svg{ width: 18px; height: 18px; }
  .task-attach-badge{ min-height: 32px; padding: 6px 10px; }
  .task-attach-badge svg{ width: 14px; height: 14px; }
}

/* ==================== ПАРТИЯ 5.1: BULK-ОПЕРАЦИИ ==================== */

.selection-btn.danger{
  background: rgba(184,58,58,0.9);
  color: #fff;
}
.selection-btn.danger:hover{ background: rgb(184,58,58); }
.selection-btn.danger:disabled{
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.4);
  cursor: default;
}

.selection-btn .sb-icon{
  display: inline-block;
  margin-right: 4px;
  font-size: 13px;
  line-height: 1;
  vertical-align: -1px;
}

/* C.1: на узких экранах — увеличиваем тач-зоны */
@media (max-width: 720px){
  .selection-bar{
    flex-wrap: wrap;
    justify-content: center;
    max-width: calc(100vw - 24px);
    padding: 10px 12px;
    gap: 10px;
    bottom: calc(12px + var(--safe-bottom));
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
  }
  .selection-info{
    flex: 1 1 100%;
    text-align: center;
    font-size: 13px;
  }
  .selection-actions{
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .selection-btn{
    padding: 10px 12px;
    font-size: 12.5px;
    min-height: 44px;
    min-width: 44px;
  }
  .selection-btn .sb-label{ display: none; }
  .selection-btn .sb-icon{
    margin-right: 0;
    font-size: 18px;
    vertical-align: middle;
  }
}

/* ==================== 6.0: ПОРУЧЕНИЯ / БЕЙДЖИ ==================== */

.task-space-badge.self-taken{
  background: #e8f5ee;
  color: var(--green);
}

.task-space-badge.assigned-by{
  background: var(--blue-bg);
  color: var(--blue);
}

.task-space-badge.from-head{
  background: var(--purple-bg);
  color: var(--purple);
  font-weight: 600;
}

.assignment-card{
  cursor: pointer;
}

.assignment-card h3 .task-space-badge{
  font-size: 10.5px;
  padding: 2px 7px;
}

.assignment-hint{
  display: inline-block;
  margin-right: 8px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.assignment-hint.warn-age{
  color: var(--orange);
}

/* ==================== 6.11: ВИРТУАЛИЗАЦИЯ СПИСКА ==================== */

#loadMoreMarker{
  height: 1px;
  width: 100%;
  margin-top: 4px;
  pointer-events: none;
  visibility: hidden;
}

.task-batch{
  display: contents;
}

.task-batch > .task-group{
  display: block;
}

#list.two-cols .task-batch{
  display: contents;
}

/* ==================== C.3c: метки и тинт на карточках ==================== */

.task-flag{
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  margin-right: 4px;
  vertical-align: -1px;
  user-select: none;
}

.task-flag-pin{
}

.task-flag-important{
}

.task h3{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
}

.task h3 > *{
  vertical-align: baseline;
}

.task h3 .task-flag:first-child{
  margin-left: 0;
}

.task.is-pinned::before{
  width: 4px;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange) 100%);
  opacity: 0.9;
}

@media (max-width: 640px){
  .task-flag{
    font-size: 13px;
    margin-right: 3px;
  }
}

/* ==================== C.2c: свайпы по списку ==================== */

#list{
  touch-action: pan-y;
  /* C.2c-fix-3: только по горизонтали. По вертикали — не мешаем
     нативному pull-to-refresh. */
  overscroll-behavior-x: contain;
}

#list.swipe-active{
  transition: none;
  will-change: transform;
}

#list:not(.swipe-active){
  transition: transform .18s ease-out;
}

/* ==================== C.2c: плашка-фантом ==================== */

.swipe-phantom{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity .15s ease-out, transform .15s ease-out;
}

.swipe-phantom.visible{
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.swipe-phantom-label{
  display: inline-block;
  padding: 14px 28px;
  background: rgba(29, 29, 31, 0.82);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.3px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
}

/* Стрелка-индикатор направления (для наглядности) */
.swipe-phantom.is-next .swipe-phantom-label::after{
  content: ' →';
  opacity: 0.7;
}
.swipe-phantom.is-prev .swipe-phantom-label::before{
  content: '← ';
  opacity: 0.7;
}

/* На десктопе плашка не нужна — свайпы по тачпаду могут ложно её вызвать */
@media (hover: hover) and (pointer: fine){
  .swipe-phantom{
    display: none;
  }
}