* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  background: #eef1f6; color: #1e293b;
  font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  overflow: hidden;
}
body { padding: 22px 30px 18px 30px; }

header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 2px solid #d4dae3;
}
h1 {
  font-size: 26px; font-weight: 600; color: #475569;
  letter-spacing: 4px; text-transform: uppercase;
  display: flex; align-items: center; gap: 16px;
}
.board-name {
  font-size: 18px; font-weight: 600;
  color: #7c3aed; letter-spacing: 1px;
  padding: 4px 12px; background: #f3e8ff; border-radius: 8px;
  text-transform: none;
}
.header-right { display: flex; align-items: center; gap: 28px; }
.clock { font-size: 24px; font-weight: 400; color: #334155; letter-spacing: 1px; }
.date  { font-size: 15px; color: #64748b; margin-top: 2px; }
.header-clock { text-align: right; }
.alerts { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600; }
.alert-pill { padding: 6px 12px; border-radius: 20px; display: none; }
.alert-pill.high  { background: #fecaca; color: #991b1b; display: inline-block; }
.alert-pill.late  { background: #fee2e2; color: #b91c1c; display: inline-block; }
.alert-pill.today { background: #ffedd5; color: #c2410c; display: inline-block; }
.status {
  font-size: 15px; color: #16a34a; display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-radius: 20px; background: #dcfce7;
}
.status::before { content: '●'; font-size: 18px; }
.status.offline { color: #dc2626; background: #fee2e2; }
.status.offline::before { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* КАНБАН */
.board {
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr; gap: 16px;
  height: calc(100vh - 110px);
  overflow: hidden; min-height: 0;
}
.column {
  display: flex; flex-direction: column; gap: 10px;
  overflow: hidden; padding: 0 2px; min-height: 0;
}
.col-title {
  font-size: 15px; font-weight: 700; color: #ffffff;
  letter-spacing: 2.5px; text-transform: uppercase;
  padding: 12px 16px; border-radius: 10px;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px; flex-shrink: 0; gap: 10px;
}
.col-title-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.col-title-left > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.col-icon svg { display: block; width: 22px; height: 22px; }
.col-people   .col-title { background: #7c3aed; }
.col-longterm .col-title { background: #ea580c; }
.col-month    .col-title { background: #7c3aed; }
.col-week     .col-title { background: #ea580c; }
.col-day      .col-title { background: #7c3aed; }
.col-done     .col-title { background: #ea580c; }
.col-count { font-size: 14px; color: #ffffff; font-weight: 600; background: rgba(255,255,255,.25); border-radius: 10px; padding: 2px 10px; flex-shrink: 0; }
.col-body-wrapper { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.col-body { display: flex; flex-direction: column; gap: 10px; will-change: transform; transform: translateZ(0); backface-visibility: hidden; }
.card {
  background: #ffffff; border-radius: 12px; padding: 14px 16px;
  border-left: 3px solid #cbd5e1;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}
.col-day .card { background: #fffbeb; border-left-color: #f59e0b; }
.col-week .card { background: #eff6ff; border-left-color: #3b82f6; }
.col-done .card { opacity: .55; border-left-color: #cbd5e1; background: #f8fafc; }
.card.has-late { border-left-color: #dc2626; background: #fef2f2; }
.card.has-high { border-left-color: #dc2626; }
.card-name {
  display: flex; align-items: center; gap: 12px;
  font-size: 17px; font-weight: 600; color: #2563eb;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.col-day .card-name { color: #b45309; border-bottom-color: #fde68a; }
.card.has-late .card-name { color: #b91c1c; border-bottom-color: #fecaca; }
.task { font-size: 20px; line-height: 1.4; padding: 4px 0; color: #1e293b; word-wrap: break-word; }
.col-done .task { text-decoration: line-through; color: #94a3b8; }
.task-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; vertical-align: middle; background: #94a3b8; }
.task-dot.high { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.15); }
.task-dot.low  { background: #16a34a; }
.task-due { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 8px; margin-left: 10px; border-radius: 10px; vertical-align: middle; }
.task-due.late   { background: #fee2e2; color: #b91c1c; }
.task-due.today  { background: #ffedd5; color: #c2410c; }
.task-due.soon   { background: #fef9c3; color: #854d0e; }
.task-due.future { background: #e0f2fe; color: #0369a1; }
.task-due.plain  { background: #e2e8f0; color: #475569; }
.person-badge { font-size: 19px; color: #1e293b; line-height: 1.3; }
.card.person-card { display: flex; align-items: center; gap: 14px; }
.initials { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; color: #ffffff; font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.card-name .initials { width: 32px; height: 32px; font-size: 12px; }
.empty { font-size: 14px; color: #cbd5e1; padding: 16px 4px; font-style: italic; }

/* ТАБЛИЦА */
.kulebin-viewport {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: calc(100vh - 110px);
  overflow: hidden;
}
.kulebin-head {
  background: #7c3aed; color: #ffffff;
  border-radius: 12px; padding: 18px 22px;
  font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  display: grid;
  gap: 14px; align-items: start;
  flex-shrink: 0;
}
.kulebin-head > div { overflow: hidden; text-overflow: ellipsis; }
.kulebin-head .col-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.kulebin-head .col-plan {
  display: block; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.75); margin-top: 4px;
  text-transform: none; letter-spacing: 0;
}

.kulebin-rows-wrapper {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}
.kulebin-rows-track {
  display: flex;
  flex-direction: column;
  gap: 10px;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.kulebin-row {
  background: #ffffff; border-radius: 12px;
  padding: 18px 22px;
  box-shadow: 0 1px 3px rgba(15,23,42,.06);
  display: grid;
  gap: 14px; align-items: center;
}

.kulebin-total {
  background: #ede9fe;
  border-radius: 12px;
  padding: 20px 22px;
  border: 2px solid #7c3aed;
  box-shadow: 0 2px 8px rgba(124,58,237,.15);
  display: grid;
  gap: 14px; align-items: center;
}
.kulebin-total .total-label {
  font-weight: 800; font-size: 16px;
  text-transform: uppercase; letter-spacing: 2px;
  color: #6d28d9;
  display: flex; align-items: center; gap: 10px;
}
.kulebin-total .total-label::before {
  content: 'Σ';
  font-size: 28px; font-weight: 900;
  color: #7c3aed;
}
.kulebin-total .amount-value { font-size: 22px; font-weight: 800; color: #5b21b6; }
.kulebin-total .amount-value.empty { color: #a78bfa; font-weight: 400; font-style: italic; font-size: 18px; }
.kulebin-total .amount-bar-wrap { margin-top: 4px; }
.kulebin-total .amount-pct { font-size: 17px; }

.kulebin-cell {
  font-size: 17px; line-height: 1.35;
  word-wrap: break-word; white-space: pre-wrap;
  color: #1e293b;
}
.kulebin-cell.empty { color: #cbd5e1; font-style: italic; }
.kulebin-name {
  display: flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 18px;
}
.kulebin-name .initials { width: 44px; height: 44px; font-size: 16px; }
.kulebin-eff {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 70px; padding: 8px 16px;
  border-radius: 22px; font-weight: 700; font-size: 20px;
}
.kulebin-eff.low  { background: #fee2e2; color: #b91c1c; }
.kulebin-eff.mid  { background: #fef3c7; color: #92400e; }
.kulebin-eff.high { background: #dcfce7; color: #166534; }
.kulebin-eff.zero { background: #e2e8f0; color: #64748b; }

.kulebin-amount { display: flex; flex-direction: column; gap: 6px; }
.kulebin-amount .amount-value { font-size: 20px; font-weight: 700; color: #1e293b; }
.kulebin-amount .amount-value.empty { color: #cbd5e1; font-weight: 400; font-style: italic; font-size: 16px; }
.amount-bar-wrap { display: flex; align-items: center; gap: 10px; }
.amount-bar { flex: 1; height: 8px; border-radius: 4px; background: #e2e8f0; overflow: hidden; min-width: 60px; }
.amount-bar-fill { height: 100%; border-radius: 4px; transition: width .3s; }
.amount-bar-fill.low  { background: #dc2626; }
.amount-bar-fill.mid  { background: #f59e0b; }
.amount-bar-fill.high { background: #16a34a; }
.amount-pct { font-size: 16px; font-weight: 700; min-width: 55px; text-align: right; }
.amount-pct.low  { color: #b91c1c; }
.amount-pct.mid  { color: #92400e; }
.amount-pct.high { color: #166534; }

/* Присутствие (0..1) */
.kulebin-attendance {
  display: flex; flex-direction: column; gap: 6px;
}
.kulebin-attendance .att-value {
  font-size: 20px; font-weight: 700; color: #fff;
  padding: 6px 14px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 70px; text-align: center;
}
.kulebin-attendance .att-value.empty {
  background: #e2e8f0 !important;
  color: #94a3b8;
  font-weight: 400; font-style: italic; font-size: 16px;
}
.kulebin-attendance .att-bar {
  height: 8px; border-radius: 4px; background: #e2e8f0; overflow: hidden;
}
.kulebin-attendance .att-bar-fill {
  height: 100%; border-radius: 4px; transition: width .3s;
}
.kulebin-total .kulebin-attendance .att-value {
  font-size: 22px; padding: 8px 18px;
}

.kulebin-empty {
  padding: 60px; text-align: center;
  color: #94a3b8; font-style: italic; font-size: 20px;
  background: #ffffff; border-radius: 12px;
  border: 1px dashed #cbd5e1;
}

/* ============================================================
   НОЧНОЙ РЕЖИМ (22:00 – 07:00)
   ============================================================ */
body.night {
  background: #1a1a1f;
  color: #cbd5e1;
}
body.night header { border-bottom-color: #2a2a32; }
body.night h1 { color: #94a3b8; }
body.night .board-name {
  color: #a78bfa;
  background: #2a1f4a;
}
body.night .clock { color: #94a3b8; }
body.night .date { color: #64748b; }
body.night .status { background: #1a2a1f; }
body.night .status.offline { background: #2a1a1a; }

body.night .col-people   .col-title { background: #4c2f8a; }
body.night .col-longterm .col-title { background: #8a4510; }
body.night .col-month    .col-title { background: #4c2f8a; }
body.night .col-week     .col-title { background: #8a4510; }
body.night .col-day      .col-title { background: #4c2f8a; }
body.night .col-done     .col-title { background: #8a4510; }
body.night .col-count { background: rgba(0,0,0,.3); }

body.night .card {
  background: #23232a;
  border-left-color: #2f2f3a;
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
body.night .col-day .card { background: #2a2418; border-left-color: #a16207; }
body.night .col-week .card { background: #1e293b; border-left-color: #2563eb; }
body.night .col-done .card { background: #1e1e22; border-left-color: #374151; }
body.night .card.has-late { background: #2a1a1a; border-left-color: #dc2626; }
body.night .card.has-high { border-left-color: #dc2626; }

body.night .card-name { color: #60a5fa; border-bottom-color: #2f2f3a; }
body.night .col-day .card-name { color: #fbbf24; border-bottom-color: #3a2f10; }
body.night .card.has-late .card-name { color: #f87171; border-bottom-color: #4a1a1a; }

body.night .task { color: #e5e7eb; }
body.night .col-done .task { color: #6b7280; }
body.night .person-badge { color: #e5e7eb; }
body.night .empty { color: #4b5563; }

body.night .kulebin-head { background: #4c2f8a; }
body.night .kulebin-row { background: #23232a; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
body.night .kulebin-cell { color: #e5e7eb; }
body.night .kulebin-cell.empty { color: #4b5563; }
body.night .kulebin-name { color: #e5e7eb; }

body.night .kulebin-total {
  background: #2a1f4a;
  border-color: #7c3aed;
  box-shadow: 0 2px 8px rgba(124,58,237,.2);
}
body.night .kulebin-total .total-label { color: #c4b5fd; }
body.night .kulebin-total .amount-value { color: #ddd6fe; }
body.night .kulebin-total .amount-value.empty { color: #7c6fb3; }

body.night .kulebin-amount .amount-value { color: #e5e7eb; }
body.night .kulebin-amount .amount-value.empty { color: #4b5563; }
body.night .amount-bar { background: #2f2f3a; }

body.night .initials { color: #ffffff; }

/* ============================================================
   АВАТАРКИ
   ============================================================ */
.initials img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.avatar-sm { width: 22px; height: 22px; font-size: 9px; }
.avatar-md { width: 30px; height: 30px; font-size: 12px; }
.avatar-lg { width: 40px; height: 40px; font-size: 15px; }
.avatar-xl { width: 48px; height: 48px; font-size: 16px; }

.kulebin-name .initials { width: 48px; height: 48px; font-size: 16px; }
.card-name .initials { width: 32px; height: 32px; font-size: 12px; }
.card.person-card .initials { width: 48px; height: 48px; font-size: 16px; }

body.night .initials img { border: 1px solid #2f2f3a; }

/* ============================================================
   Индикатор ротации в шапке ТВ
   ============================================================ */
.rotate-badge {
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  margin-left: 6px;
  vertical-align: middle;
  transition: opacity .2s;
}
.rotate-badge.rotating {
  animation: rotatePulse 2.4s ease-in-out infinite;
}
.rotate-badge.locked {
  opacity: .9;
}
body.night .rotate-badge { opacity: .85; }
body.night .rotate-badge.locked { opacity: 1; }

@keyframes rotatePulse {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(180deg); }
}

/* ============================================================
   Прогресс-полоска до следующей ротации
   ============================================================ */
.rotate-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 0%;
  background: linear-gradient(90deg, #7c3aed, #a78bfa);
  z-index: 100;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
body.night .rotate-progress {
  background: linear-gradient(90deg, #a78bfa, #c4b5fd);
}

/* ============================================================
   Крупные счётчики в шапке — видно с 5 метров
   ============================================================ */
.alert-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 14px;
  line-height: 1;
}
.alert-pill .pill-icon {
  font-size: 26px;
  line-height: 1;
}
.alert-pill .pill-num {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  min-width: 34px;
  text-align: center;
}
.alert-pill .pill-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  opacity: .75;
}

/* ============================================================
   Пять улучшений ТВ
   ============================================================ */

/* 1) Fade при смене доски */
#main-area {
  transition: opacity .25s ease-out;
}

/* 4) Крупное название доски */
.board-name {
  font-size: 32px !important;
  padding: 6px 18px !important;
  letter-spacing: 0.5px !important;
  border-radius: 12px !important;
}
body.night .board-name {
  font-size: 32px !important;
}

/* 2) Подсветка новых задач */
.task {
  transition: background-color .5s ease-out, transform .3s ease-out;
  border-radius: 6px;
  padding: 4px 8px;
}
.task.task-new {
  background-color: #bbf7d0;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, .25);
  transform: scale(1.02);
}
body.night .task.task-new {
  background-color: #14532d;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .35);
}

/* 3) Индикатор «последнее обновление» — правый нижний угол */
.last-update {
  position: fixed;
  bottom: 8px;
  right: 14px;
  font-size: 11px;
  font-family: -apple-system, 'Segoe UI', sans-serif;
  color: #94a3b8;
  z-index: 99;
  pointer-events: none;
  user-select: none;
}
.last-update.stale { color: #dc2626; font-weight: 600; }
body.night .last-update { color: #4b5563; }
body.night .last-update.stale { color: #f87171; }

/* 5) Топ-3 сотрудника недели — правый нижний угол, над индикатором */
.top-week {
  position: fixed;
  bottom: 34px;
  right: 14px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 180px;
  z-index: 99;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
  backdrop-filter: blur(6px);
}
.top-week-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #7c3aed;
  margin-bottom: 8px;
}
.top-week-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  padding: 2px 0;
}
.top-week-medal { font-size: 16px; flex-shrink: 0; }
.top-week-name { flex: 1; color: #475569; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-week-count { font-weight: 800; color: #1e293b; min-width: 22px; text-align: right; }

body.night .top-week {
  background: rgba(35, 35, 42, .92);
  border-color: #2f2f3a;
}
body.night .top-week-title { color: #a78bfa; }
body.night .top-week-name { color: #cbd5e1; }
body.night .top-week-count { color: #e5e7eb; }

/* ============================================================
   Три улучшения: просрочка, появление, bump счётчиков
   ============================================================ */

/* 1) Просроченные задачи — пульсирующая красная обводка */
.task.task-overdue {
  animation: overduePulse 2.2s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes overduePulse {
  0%, 100% {
    box-shadow: inset 0 0 0 2px rgba(220, 38, 38, .35);
    background-color: transparent;
  }
  50% {
    box-shadow: inset 0 0 0 3px rgba(220, 38, 38, .75);
    background-color: rgba(254, 226, 226, .55);
  }
}
body.night .task.task-overdue {
  animation-name: overduePulseNight;
}
@keyframes overduePulseNight {
  0%, 100% {
    box-shadow: inset 0 0 0 2px rgba(248, 113, 113, .4);
    background-color: transparent;
  }
  50% {
    box-shadow: inset 0 0 0 3px rgba(248, 113, 113, .8);
    background-color: rgba(127, 29, 29, .35);
  }
}

/* 2) Анимация появления новых задач */
.task.task-enter {
  animation: taskEnter .4s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes taskEnter {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* 3) Bump счётчиков при изменении значения */
.pill-num.bump {
  animation: bumpNum .5s ease-out;
}
@keyframes bumpNum {
  0%   { transform: scale(1);    color: inherit; }
  35%  { transform: scale(1.35); color: #16a34a; }
  70%  { transform: scale(.95);  color: #16a34a; }
  100% { transform: scale(1);    color: inherit; }
}
body.night .pill-num.bump {
  animation-name: bumpNumNight;
}
@keyframes bumpNumNight {
  0%   { transform: scale(1);    color: inherit; }
  35%  { transform: scale(1.35); color: #4ade80; }
  70%  { transform: scale(.95);  color: #4ade80; }
  100% { transform: scale(1);    color: inherit; }
}

/* .pill-num должен быть inline-block для transform */
.alert-pill .pill-num {
  display: inline-block;
}