/* ============================================================================
 * Грид · Граждане и отделы — Стили секции отделов, аккордеона и иерархии
 * Соответствует Закону Модульности (Статья XIX): файл < 800 строк
 * ============================================================================ */

/* ---------- Секция отделов (Header & Summary) ---------- */
.depts-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  transition: all var(--dur-smooth) ease;
}

.depts-title-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  min-width: 0;
  flex-wrap: wrap;
}
.card-h .depts-title-wrap h2,
.depts-section .card-h h2,
.depts-title-wrap h2 {
  color: var(--tx-warm-title);
}

.dept-category-chips {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  margin-left: auto;
  margin-right: var(--sp-2);
  flex-wrap: wrap;
  min-width: 0;
}

.depts-actions-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .depts-actions-group { width: 100%; }
  .depts-actions-group .btn { flex: 1 1 0; text-align: center; justify-content: center; padding: var(--sp-1-5) var(--sp-2); font-size: var(--fs-sm); }
}

.btn-toggle-depts {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  font-size: var(--fs-sm);
  padding: var(--sp-1-5) var(--sp-3);
  cursor: pointer;
  user-select: none;
  transition: all var(--dur-normal) var(--ease-spring);
}

.btn-toggle-depts #toggleDeptsIcon,
.btn-toggle-depts .toggle-icon {
  font-size: var(--fs-2xs);
  display: inline-block;
  transition: transform var(--dur-slow) var(--ease-spring);
}

.depts-section.collapsed .btn-toggle-depts #toggleDeptsIcon,
.depts-section.collapsed .btn-toggle-depts .toggle-icon {
  transform: rotate(180deg);
}

.depts-collapsed-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2-5) var(--sp-3-5);
  background: var(--slate-900-alpha-80);
  border: 1px dashed var(--violet-alpha-30);
  border-radius: var(--r-10);
  font-size: var(--fs-sub);
  color: var(--tx2);
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease-spring);
  animation: fadeIn var(--dur-smooth) var(--ease-spring);
  flex-wrap: wrap;
}

.depts-collapsed-summary:hover {
  background: var(--slate-800-alpha-90);
  border-color: var(--violet-alpha-60);
  color: var(--tx);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--black-alpha-40), 0 0 12px var(--violet-alpha-20);
}

.depts-summary-icon { font-size: var(--fs-xl); line-height: 1; }

.depts-summary-text {
  font-weight: 600;
  color: var(--tx-warm-title);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.depts-summary-pills {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex-wrap: wrap;
}

.depts-summary-pill {
  font-size: var(--fs-xs);
  font-family: var(--mono);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-sm);
  background: var(--white-alpha-04);
  border: 1px solid var(--white-alpha-08);
  color: var(--tx2);
}
.depts-summary-pill.active-clones { color: var(--green-light); background: var(--green-alpha-12); border-color: var(--green-alpha-30); }
.depts-summary-pill.sleeping-clones { color: var(--tx3); background: var(--slate-400-alpha-12); border-color: var(--slate-400-alpha-20); }
.depts-summary-hint { font-size: var(--fs-sm); color: var(--tx3); margin-left: auto; font-style: italic; }

@media (max-width: 768px) {
  .dept-category-chips {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    margin: 0 0 var(--sp-1);
    padding-bottom: var(--sp-1);
  }
  .dept-category-chips::-webkit-scrollbar { display: none; }
  .depts-summary-hint { width: 100%; margin-left: 0; margin-top: var(--sp-1); }
}

/* ---------- Плавный аккордеон-обертка сетки отделов ---------- */
.depts-accordion-wrapper {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-normal) var(--ease-spring), opacity var(--dur-fast) var(--ease-out);
  opacity: 1;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.depts-accordion-inner {
  overflow: visible;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
}

.depts-section.collapsed .depts-accordion-inner {
  overflow: hidden;
}

.depts-section.collapsed .depts-accordion-wrapper {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

/* ---------- 4-колоночная сетка отделов ---------- */
.depts-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 1200px) { .depts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .depts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .depts-grid { grid-template-columns: 1fr; } }

.dept-card {
  background: var(--surface-1);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-card);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  cursor: pointer;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-normal) var(--ease-spring), border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease, background var(--dur-normal) ease;
  min-height: 145px;
}
.dept-card:hover {
  transform: translateY(-2px);
  border-color: var(--violet-alpha-40);
  box-shadow: var(--shadow-card-hover), 0 0 16px var(--violet-alpha-20);
  background: var(--surface-2);
}
.dept-card.active {
  border-color: var(--violet);
  background: var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--white-alpha-04), 0 0 0 1px var(--violet), var(--shadow-card-hover);
}

.dept-top { display: flex; align-items: flex-start; gap: var(--sp-2-5); }
.dept-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-10);
  background: var(--card2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: var(--fs-2xl);
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 10px var(--black-alpha-30);
  transition: transform var(--dur-normal) var(--ease-spring), border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}
.dept-card:hover .dept-icon {
  border-color: var(--violet-alpha-50);
  box-shadow: 0 4px 14px var(--black-alpha-40), 0 0 12px var(--violet-alpha-20);
}
.dept-card.cat-military .dept-icon { border-color: var(--blue-alpha-30); }
.dept-card.cat-university .dept-icon { border-color: var(--violet-alpha-30); }
.dept-card.cat-audit .dept-icon { border-color: var(--rose-alpha-30); }

.dept-fallback-emoji {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-2xl);
  z-index: 1;
  user-select: none;
  background: radial-gradient(circle at center, var(--slate-800-alpha-90) 0%, var(--slate-900-alpha-90) 100%);
}

.dept-emblem-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--dur-smooth) ease, transform var(--dur-smooth) ease;
}
.dept-emblem-img.loaded { opacity: 1; }
.dept-emblem-img.error { opacity: 0; display: none !important; }
.dept-card:hover .dept-emblem-img.loaded { transform: scale(1.06); }

.dept-info { flex: 1; min-width: 0; }
.dept-name {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--tx-warm-title);
  line-height: 1.3;
  word-break: break-word;
}
.dept-motto {
  font-size: var(--fs-sm);
  color: var(--violet-light);
  font-style: italic;
  line-height: 1.35;
  margin-top: var(--sp-0-5);
  word-break: break-word;
}
.dept-purpose {
  font-size: var(--fs-sm);
  color: var(--tx2);
  line-height: 1.45;
  display: block;
  overflow: visible;
  word-break: break-word;
}

.dept-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--sp-1-5);
  border-top: 1px dashed var(--white-alpha-04);
}
.dept-score {
  font-size: var(--fs-sm);
  color: var(--tx2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  white-space: nowrap;
}
.dept-score b { font-family: var(--mono); color: var(--white); }

.dept-members-badge {
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--bg-surface-navy);
  color: var(--blue);
  border: 1px solid var(--blue-alpha-30);
  border-radius: var(--r-sm);
  padding: var(--sp-0-5) var(--sp-1-5);
  font-family: var(--mono);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
  max-width: max-content;
}

.dept-active-tag {
  font-size: var(--fs-xs);
  color: var(--violet-light);
  background: var(--violet-alpha-20);
  border: 1px solid var(--violet-alpha-40);
  border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-2);
  text-align: center;
  margin-top: var(--sp-0-5);
}

.badge-cat-univ { font-size:var(--fs-2xs); font-weight:600; background:var(--violet-alpha-20); color:var(--tx-pastel-purple); border:1px solid var(--violet-alpha-40); border-radius:var(--r-sm); padding:var(--sp-0-5) var(--sp-1-5); }
.badge-cat-audit { font-size:var(--fs-2xs); font-weight:600; background:var(--red-alpha-20); color:var(--tx-pastel-red); border:1px solid var(--red-alpha-40); border-radius:var(--r-sm); padding:var(--sp-0-5) var(--sp-1-5); }
.badge-cat-brig { font-size:var(--fs-2xs); font-weight:600; background:var(--badge-cat-brig-bg); color:var(--badge-cat-brig-tx); border:1px solid var(--badge-cat-brig-border); border-radius:var(--r-sm); padding:var(--sp-0-5) var(--sp-1-5); }

/* ---------- Лица участников отдела внахлёст ---------- */
.avatar-stack { display: flex; align-items: center; padding-left: var(--sp-1-5); margin-top: var(--sp-0-5); min-height: 28px; }
.stack-ava {
  width: 28px; height: 28px; border-radius: var(--r-circle); border: 2px solid var(--card2);
  margin-left: calc(-1 * var(--sp-1-5)); object-fit: cover; background: var(--card2);
  display: grid; place-items: center; font-size: var(--fs-sm); box-shadow: 0 2px 5px var(--black-alpha-30);
  transition: transform var(--dur-normal) ease, z-index var(--dur-normal) ease; position: relative;
}
.stack-ava:hover { transform: scale(1.25); z-index: 10; }
.stack-ava-initials { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: -0.3px; text-transform: uppercase; user-select: none; }
.stack-more {
  width: 28px; height: 28px; border-radius: var(--r-circle); background: var(--line);
  border: 2px solid var(--card2); margin-left: calc(-1 * var(--sp-1-5)); font-size: var(--fs-xs);
  color: var(--tx2); display: grid; place-items: center; font-family: var(--mono);
}

.dept-empty-state {
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  padding: var(--sp-1-5) var(--sp-2);
  background: var(--white-alpha-04);
  border: 1px dashed var(--white-alpha-08);
  border-radius: var(--r-md);
  color: var(--tx3);
  font-size: var(--fs-sm);
  margin-top: var(--sp-0-5);
  min-height: 28px;
}
.dept-empty-icon { font-size: var(--fs-sub); opacity: 0.7; }
.dept-empty-text { font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.1px; }

/* ---------- Прогресс-бар боеготовности отдела ---------- */
.dept-load-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--black-alpha-20);
  border: 1px solid var(--white-alpha-04);
  border-radius: var(--r-md);
  padding: var(--sp-1-5) var(--sp-2-5);
  margin-top: var(--sp-0-5);
}
.dept-load-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-1-5);
  font-size: var(--fs-xs);
  flex-wrap: nowrap;
  min-width: 0;
}
.dept-load-label {
  color: var(--tx2);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.dept-load-values {
  font-family: var(--mono);
  font-size: var(--fs-sm);
  color: var(--tx2);
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 0;
}
.dept-load-values b { color: var(--blue); font-weight: 700; }
.dept-load-pct { color: var(--tx2); font-size: var(--fs-xs); margin-left: var(--sp-0-5); }

.dept-load-bar {
  height: 5px;
  border-radius: var(--r-xs);
  background: var(--slate-900-alpha-80);
  overflow: hidden;
  position: relative;
}
.dept-load-fill {
  height: 100%;
  border-radius: var(--r-xs);
  transition: width var(--dur-slow) ease;
  background: linear-gradient(90deg, var(--blue), var(--green));
}
.dept-load-fill.full { background: linear-gradient(90deg, var(--green), var(--blue)); }
.dept-load-fill.medium { background: linear-gradient(90deg, var(--violet), var(--blue)); }
.dept-load-fill.low { background: linear-gradient(90deg, var(--amber), var(--rank-celestial)); }
.dept-load-fill.empty { background: var(--text-muted); }

.dept-clones-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-family: var(--mono);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-sm);
  background: var(--white-alpha-04);
  border: 1px solid var(--white-alpha-08);
  color: var(--tx2);
  white-space: nowrap;
}
.dept-clones-pill .clone-dot { width: 5px; height: 5px; border-radius: var(--r-circle); display: inline-block; }
.dept-clones-pill .clone-dot.active { background: var(--green); box-shadow: 0 0 5px var(--green); }
.dept-clones-pill .clone-dot.sleeping { background: var(--tx3); }

/* ---------- Иерархический вид по отделам (Departments View) ---------- */
.departments-hierarchy-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  width: 100%;
  box-sizing: border-box;
}

.dept-hierarchy-block {
  background: var(--card2);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3-5);
  box-sizing: border-box;
  transition: border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease, background var(--dur-normal) ease;
}
.dept-hierarchy-block:hover {
  border-color: var(--violet-alpha-30);
  box-shadow: 0 8px 30px var(--black-alpha-30);
}
.dept-hierarchy-block.reserve {
  border-style: dashed;
  background: var(--slate-900-alpha-60);
}

.dept-hierarchy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  transition: opacity var(--dur-normal) ease;
}
.dept-hierarchy-header:hover { opacity: 0.92; }

.dept-hierarchy-block.collapsed .dept-hierarchy-header {
  border-bottom: none;
  padding-bottom: 0;
}

.dept-hierarchy-toggle {
  font-size: var(--fs-sm);
  color: var(--tx3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  background: var(--white-alpha-04);
  border: 1px solid var(--white-alpha-08);
  transition: transform var(--dur-smooth) var(--ease-spring), background var(--dur-normal) ease, color var(--dur-normal) ease;
  margin-left: var(--sp-1-5);
}
.dept-hierarchy-header:hover .dept-hierarchy-toggle {
  background: var(--violet-alpha-20);
  color: var(--white);
  border-color: var(--violet-alpha-40);
}
.dept-hierarchy-block.collapsed .dept-hierarchy-toggle {
  transform: rotate(-90deg);
}

.dept-hierarchy-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-spring), opacity var(--dur-normal) ease;
  opacity: 1;
  width: 100%;
}
.dept-hierarchy-body-inner {
  overflow: hidden;
  min-height: 0;
  width: 100%;
}
.dept-hierarchy-block.collapsed .dept-hierarchy-body {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.dept-hierarchy-title-area {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  flex: 1 1 auto;
}

.dept-icon-mini {
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--card2);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-size: var(--fs-xl);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.dept-hierarchy-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}

.dept-hierarchy-name-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.dept-hierarchy-name {
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--tx);
  margin: 0;
  letter-spacing: -0.2px;
}

.dept-hierarchy-count-pill {
  font-size: var(--fs-xs);
  font-family: var(--mono);
  background: var(--white-alpha-04);
  border: 1px solid var(--white-alpha-08);
  color: var(--tx2);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-sm);
}

.dept-hierarchy-motto {
  font-size: var(--fs-sm);
  color: var(--violet-light);
  font-style: italic;
}

.dept-hierarchy-purpose {
  font-size: var(--fs-sm);
  color: var(--tx2);
}

.dept-hierarchy-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-left: auto;
  flex-wrap: wrap;
}

.dept-hierarchy-score {
  font-size: var(--fs-sub);
  color: var(--violet-light);
  font-family: var(--mono);
  background: var(--violet-alpha-15);
  border: 1px solid var(--violet-alpha-30);
  padding: var(--sp-1) var(--sp-2-5);
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.dept-hierarchy-score b { color: var(--white); }

/* Шкала опыта отделов */
.dept-xp-scale-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--black-alpha-20);
  border: 1px solid var(--white-alpha-04);
  border-radius: var(--r-md);
  padding: var(--sp-1-5) var(--sp-2-5);
  min-width: 170px;
  box-sizing: border-box;
}

.dept-xp-scale-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--tx2);
}
.dept-xp-scale-label { font-weight: 500; color: var(--tx3); }
.dept-xp-scale-val {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--violet-light);
}
.dept-xp-scale-val b { color: var(--white); }

.dept-xp-scale-bar {
  height: 5px;
  border-radius: var(--r-xs);
  background: var(--slate-900-alpha-80);
  overflow: hidden;
  position: relative;
}

.dept-xp-scale-fill {
  height: 100%;
  border-radius: var(--r-xs);
  transition: width var(--dur-slow) ease;
  background: linear-gradient(90deg, var(--violet), var(--stage-8));
  box-shadow: 0 0 6px var(--violet-alpha-40);
}
.dept-xp-scale-fill.badge-cat-brig {
  background: linear-gradient(90deg, var(--blue), var(--blue));
  box-shadow: 0 0 6px var(--blue-alpha-40);
}
.dept-xp-scale-fill.badge-cat-univ {
  background: linear-gradient(90deg, var(--violet), var(--violet-light));
  box-shadow: 0 0 6px var(--violet-alpha-40);
}
.dept-xp-scale-fill.badge-cat-audit {
  background: linear-gradient(90deg, var(--stage-7), var(--tx-pastel-rose));
  box-shadow: 0 0 6px var(--rose-alpha-40);
}

.dept-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--sp-4);
  row-gap: var(--sp-6);
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Стилизованная пустая карточка подразделения (Empty State) ---------- */
.dept-empty-card-block {
  grid-column: 1 / -1;
  background: var(--slate-900-alpha-60);
  border: 1px dashed var(--violet-alpha-30);
  border-radius: var(--r-10);
  padding: var(--sp-4) var(--sp-5);
  box-sizing: border-box;
  animation: fadeIn var(--dur-normal) ease-out;
}
.dept-empty-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3-5);
  flex-wrap: wrap;
}
.dept-empty-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--r-10);
  background: var(--violet-alpha-15);
  border: 1px solid var(--violet-alpha-30);
  display: grid;
  place-items: center;
  font-size: var(--fs-xl);
  flex-shrink: 0;
}
.dept-empty-text-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
  flex: 1 1 200px;
  min-width: 0;
}
.dept-empty-title {
  font-weight: 600;
  color: var(--white);
  font-size: var(--fs-body);
}
.dept-empty-sub {
  color: var(--tx3);
  font-size: var(--fs-sm);
}
.dept-empty-reset-btn {
  background: var(--violet-alpha-20);
  border: 1px solid var(--violet-alpha-40);
  border-radius: var(--r-sm);
  color: var(--violet-light);
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: var(--sp-1-5) var(--sp-3);
  cursor: pointer;
  transition: all var(--dur-normal) ease;
  user-select: none;
}
.dept-empty-reset-btn:hover {
  background: var(--violet-alpha-30);
  color: var(--white);
  border-color: var(--violet);
  transform: translateY(-1px);
}

/* Light theme overrides */
html.light-theme .depts-collapsed-summary { background: var(--card2); border-color: var(--violet-alpha-40); color: var(--tx2); }
html.light-theme .depts-collapsed-summary:hover { background: var(--bg2); color: var(--tx); }
html.light-theme .depts-summary-pill { background: var(--card); border-color: var(--line); color: var(--tx2); }
html.light-theme .depts-summary-pill.active-clones { background: var(--rank-junior-bg); border-color: var(--rank-junior-border); color: var(--green-light); }
html.light-theme .dept-hierarchy-block { background: var(--white); border-color: var(--line); box-shadow: 0 var(--sp-0-5) var(--sp-2) var(--black-alpha-04); }
html.light-theme .dept-hierarchy-block.reserve { background: var(--card2); border-color: var(--line); }
html.light-theme .dept-hierarchy-header { border-bottom-color: var(--line); }
html.light-theme .dept-hierarchy-name { color: var(--tx); }
html.light-theme .dept-hierarchy-count-pill { background: var(--bg2); border-color: var(--line); color: var(--tx2); }
html.light-theme .dept-hierarchy-score { background: var(--rank-senior-bg); color: var(--violet-dark); border-color: var(--violet-light); }
html.light-theme .dept-hierarchy-score b { color: var(--tx); }
html.light-theme .dept-xp-scale-wrap { background: var(--bg2); border-color: var(--line); }
html.light-theme .dept-xp-scale-label { color: var(--tx3); }
html.light-theme .dept-xp-scale-val { color: var(--violet-dark); }
html.light-theme .dept-xp-scale-val b { color: var(--tx); }
html.light-theme .dept-empty-card-block { background: var(--card2); border-color: var(--line); color: var(--tx3); }
html.light-theme .dept-empty-reset-btn { background: var(--rank-senior-bg); border-color: var(--violet-light); color: var(--violet-dark); }
html.light-theme .dept-clones-pill { background: var(--card); border-color: var(--line); color: var(--tx2); }
html.light-theme .dept-clones-pill .clone-dot.active { background: var(--green); }
html.light-theme .dept-load-values b { color: var(--blue); }