/* ============================================================================
   Мир «Грид» — Единый модуль боковой панели (Side Panel v2.0)
   Пакет: F22-GOAL-w4-g1-s3-r2 (Дизайнер Дашбордов VIII · designer_c7)
   Стандарты: WCAG 2.2 AA · 60fps Transitions · Zero-CLS · Модульность (<800 строк)
   ============================================================================ */

/* Канонические токены боковой панели вынесены в tokens.css */
/* Единый канонический контур клавиатурного фокуса (WCAG 2.2 AA) */
:is(.btn-side-collapse, .btn-burger, .side-brand, .btn-side-search, .btn-side-action, .side-nav-i, .btn-side-theme, .side-user-card):focus-visible { outline: 2px solid var(--side-focus-ring) !important; outline-offset: var(--side-focus-offset, 2px) !important; }

/* Общая сетка приложения */
.app {
  display: grid;
  grid-template-columns: var(--side-w-expanded) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  transition: grid-template-columns var(--side-anim-dur) var(--side-anim-ease);
}

.side { grid-column: 1; grid-row: 1; }

.main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}

/* Единая шапка страниц Державы (Top Header System) */
.main > .head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2-5); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5) var(--sp-2); min-height: var(--sp-12); min-width: 0; box-sizing: border-box; }
.main > .head .head-right { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.main > .head h1 { font-family: var(--display); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--tx); line-height: var(--lh-tight); }
.main > .head .head-sub { color: var(--tx3); font-size: var(--fs-sm); margin-top: var(--sp-1); }

/* Основной контейнер боковой панели — монолитный 100vh при любом скролле */
.side {
  background: var(--bg2);
  border-right: 1px solid var(--line);
  padding: var(--sp-3-5) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2-5);
  position: sticky;
  top: 0;
  height: 100vh; height: 100dvh;
  min-height: 100vh; min-height: 100dvh;
  max-height: 100vh; max-height: 100dvh;
  align-self: start;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 50;
  transition: width var(--side-anim-dur) var(--side-anim-ease), padding var(--side-anim-dur) var(--side-anim-ease);
}
.side::-webkit-scrollbar { width: 4px; }
.side::-webkit-scrollbar-thumb { background: var(--white-alpha-20); border-radius: var(--r-xs); }

/* Шапка панели */
.side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-0-5) var(--sp-1) var(--sp-1-5); border-bottom: 1px solid var(--line-glass); flex: 0 0 auto; }
.side-brand { display: flex; align-items: center; gap: var(--sp-2-5); text-decoration: none; color: inherit; min-width: 0; border-radius: var(--r-md); padding: var(--sp-0-5) var(--sp-1); transition: opacity var(--dur-normal) ease; }
.side-brand:hover { opacity: 0.9; }

.side-brand-logo { width: 34px; height: 34px; border-radius: var(--r-md); display: grid; place-items: center; font-size: var(--fs-lg); background-color: var(--violet); background-image: linear-gradient(135deg, var(--violet), var(--violet-dark)); box-shadow: 0 0 14px var(--violet-glow); flex: 0 0 auto; color: var(--white); user-select: none; }
.side-brand-text { display: flex; flex-direction: column; min-width: 0; overflow: hidden; white-space: nowrap; }
.side-brand-title { font-weight: 700; font-size: var(--fs-body); letter-spacing: -0.2px; color: var(--tx); line-height: var(--lh-tight); }
.side-brand-sub { font-size: var(--fs-xs); color: var(--tx3); letter-spacing: 0.2px; }

.btn-side-collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  box-sizing: border-box;
  border-radius: var(--r-sm);
  background: var(--white-alpha-04);
  border: 1px solid var(--line-glass);
  color: var(--tx2);
  font-size: var(--fs-body);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.btn-side-collapse:hover { background: var(--violet-alpha-15); border-color: var(--violet); color: var(--tx); box-shadow: 0 0 8px var(--violet-alpha-20); }
.btn-side-collapse:active { transform: scale(0.97); }
.btn-side-collapse .collapse-icon { display: inline-flex; align-items: center; justify-content: center; transition: transform var(--side-anim-dur) var(--side-anim-ease); }

.btn-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-sm);
  background: var(--white-alpha-04);
  border: 1px solid var(--line-glass);
  color: var(--tx);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.btn-burger:hover { background: var(--violet-alpha-15); border-color: var(--violet); box-shadow: 0 0 8px var(--violet-alpha-20); }
.btn-burger:active { transform: scale(0.97); }

/* Верхняя секция: Поиск Ctrl+K и Заметки Alt+N */
.side-search-wrap { width: 100%; flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--sp-1-5); }
.btn-side-search,
.btn-side-action {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-2-5);
  border-radius: var(--r-md);
  background: var(--card2);
  border: 1px solid var(--line-glass);
  color: var(--tx2);
  font-size: var(--fs-sub);
  font-weight: 500;
  cursor: pointer;
  box-sizing: border-box;
  text-align: left;
  user-select: none;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
}
.btn-side-search:hover,
.btn-side-action:hover { background: var(--violet-alpha-12); border-color: var(--violet-alpha-40); color: var(--tx); box-shadow: 0 0 10px var(--violet-alpha-20); }
.btn-side-search:active,
.btn-side-action:active { transform: scale(0.98); }
.side-search-icon,
.side-action-icon { display: grid; place-items: center; flex: 0 0 auto; opacity: 0.85; }
.btn-side-search:hover .side-search-icon,
.btn-side-action:hover .side-action-icon { opacity: 1; color: var(--violet-light); }
.side-search-text,
.side-action-text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-search-kbd,
.side-action-kbd {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  padding: var(--sp-px) var(--sp-1-25);
  border-radius: var(--r-xs);
  background: var(--white-alpha-08);
  border: 1px solid var(--line-glass);
  color: var(--tx3);
  letter-spacing: 0.3px;
  flex: 0 0 auto;
}
.btn-side-notes.active { background: var(--violet) !important; color: var(--white) !important; border-color: var(--violet-light) !important; box-shadow: 0 0 14px var(--violet-glow) !important; }
.btn-side-notes.active .side-action-icon { color: var(--white) !important; opacity: 1 !important; }

/* Тело панели и Навигация */
.side-drawer-container { display: flex; flex-direction: column; gap: var(--sp-2-5); flex: 1 1 auto; justify-content: space-between; min-height: 0; }
.side-body { display: flex; flex-direction: column; gap: var(--sp-2-5); flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.side-nav { display: flex; flex-direction: column; gap: var(--sp-1); padding: 0; margin: 0; flex: 0 0 auto; }
a.side-nav-i,
.side-nav-i {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  padding: var(--sp-2) var(--sp-2-5);
  border-radius: var(--r-md);
  color: var(--tx2) !important;
  text-decoration: none;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 500;
  position: relative;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
  user-select: none;
  box-sizing: border-box;
}
a.side-nav-i:link,
a.side-nav-i:visited { color: var(--tx2) !important; text-decoration: none; }
.side-nav-i:hover { background: var(--violet-alpha-08); color: var(--tx) !important; box-shadow: 0 0 6px var(--violet-alpha-12); }
.side-nav-i:active { transform: scale(0.98); }
a.side-nav-i.active,
.side-nav-i.active { background: var(--nav-active-bg); color: var(--nav-active-tx) !important; box-shadow: inset 3px 0 0 var(--nav-active-border); font-weight: 600; }
.side-nav-icon { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; opacity: 0.85; }
.side-nav-i.active .side-nav-icon { opacity: 1; color: var(--nav-active-tx); }
.side-nav-text { color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; }

/* Бейджи навигации */
.side-badge-live {
  margin-left: auto;
  font-size: var(--fs-xs);
  background-color: var(--violet-dark);
  background-image: linear-gradient(135deg, var(--violet-dark), var(--violet-dark));
  color: var(--white);
  border-radius: var(--r-xs);
  padding: var(--sp-0-5) var(--sp-1-25);
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid var(--violet-alpha-50);
  box-shadow: 0 0 8px var(--violet-alpha-30);
  flex: 0 0 auto;
}
.side-badge-work {
  margin-left: auto;
  font-size: var(--fs-xs);
  background: var(--badge-work-bg);
  color: var(--badge-work-tx);
  border: 1px solid var(--badge-work-border);
  border-radius: var(--r-full);
  padding: var(--sp-0-5) var(--sp-1-5);
  font-family: var(--mono);
  font-weight: 700;
  flex: 0 0 auto;
  min-width: 16px;
  text-align: center;
}
.side-badge-kit {
  margin-left: auto;
  font-size: var(--fs-xs);
  background: var(--violet-alpha-20);
  color: var(--violet-light);
  border: 1px solid var(--violet-alpha-40);
  border-radius: var(--r-xs);
  padding: var(--sp-0-5) var(--sp-1-25);
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: 0.5px;
  flex: 0 0 auto;
}
.side-badge-notes {
  margin-left: auto;
  font-size: var(--fs-xs);
  background: var(--amber-alpha-20);
  color: var(--tx-pastel-amber);
  border: 1px solid var(--amber-alpha-40);
  border-radius: var(--r-full);
  padding: var(--sp-0-5) var(--sp-1-5);
  font-family: var(--mono);
  font-weight: 700;
  flex: 0 0 auto;
  min-width: 16px;
  text-align: center;
  line-height: var(--lh-tight);
  transition: background var(--dur-normal) ease, border-color var(--dur-normal) ease, color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}
.side-badge-notes.has-notes { background: var(--amber-alpha-30); color: var(--amber-light); border-color: var(--amber); box-shadow: 0 0 8px var(--amber-alpha-30); }
.side-badge-citizens {
  margin-left: auto;
  font-size: var(--fs-xs);
  background: var(--blue-alpha-20);
  color: var(--blue-light);
  border: 1px solid var(--blue-alpha-40);
  border-radius: var(--r-full);
  padding: var(--sp-0-5) var(--sp-1-5);
  font-family: var(--mono);
  font-weight: 700;
  flex: 0 0 auto;
  min-width: 16px;
  text-align: center;
  line-height: var(--lh-tight);
}
:is(.side-badge-live, .side-badge-work, .side-badge-kit, .side-badge-notes, .side-badge-citizens, .side-hq-wave)::before { display: none !important; content: none !important; }

/* Карточка пульса и телеметрии */
.side-pulse-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1-5);
  margin-top: var(--sp-0-5);
  box-shadow: var(--shadow-card);
  transition: border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease, background var(--dur-normal) ease;
  flex: 0 0 auto;
}
.side-pulse-card:hover { border-color: var(--violet-alpha-40); box-shadow: var(--shadow-card-hover); }

.side-pulse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1-5);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.side-pulse-title { display: flex; align-items: center; gap: var(--sp-1-25); }
.side-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}
.side-pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background: inherit;
  pointer-events: none;
  animation: sideRadarPulse var(--dur-pulse) infinite cubic-bezier(0, 0, 0.2, 1);
  will-change: transform, opacity;
  z-index: 0;
}
@keyframes sideRadarPulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}

.side-pulse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1-5); }
.side-pulse-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
  background: var(--white-alpha-04);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-glass);
}
.side-pulse-k { font-size: var(--fs-xs); color: var(--tx2); white-space: nowrap; }
.side-pulse-v { font-family: var(--mono); font-weight: 700; font-size: var(--fs-sub); color: var(--tx); }
.side-pulse-v.highlight { color: var(--blue); }
.side-pulse-v.success { color: var(--green); }

.side-pulse-mission {
  font-size: var(--fs-xs);
  color: var(--tx2);
  border-top: 1px solid var(--line-glass);
  padding-top: var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-1-5);
  flex-wrap: wrap;
}
.side-pulse-mission .side-mission-text { font-weight: 600; color: var(--violet-light); word-break: break-word; }

.side-pulse-hq {
  margin-top: var(--sp-1);
  padding: var(--sp-1-5) var(--sp-2);
  background: var(--white-alpha-04);
  border: 1px solid var(--line-glass);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
}
.side-hq-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-1-5); flex-wrap: wrap; }
.side-hq-title { font-weight: 600; color: var(--tx); display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-xs); min-width: 0; flex: 1 1 auto; }
.side-hq-title > span, #sideHQPhase { min-width: 0; word-break: break-word; white-space: normal; line-height: var(--lh-tight); }
:is(.side-hq-wave, .badge.side-hq-wave, #sideHQWave) {
  font-size: var(--fs-xs);
  font-family: var(--mono);
  font-weight: 700;
  padding: var(--sp-0-5) var(--sp-1-25);
  border-radius: var(--r-xs);
  background: var(--violet-alpha-20);
  color: var(--violet-light);
  border: 1px solid var(--violet-alpha-40);
  flex-shrink: 0;
  min-width: max-content;
  white-space: nowrap;
  gap: 0 !important;
}
.side-hq-action { font-size: var(--fs-xs); color: var(--tx3); line-height: var(--lh-snug); word-break: break-word; white-space: normal; }

/* Баки моделей (Quotas & Buckets) */
.side-buckets-wrap { border-top: 1px solid var(--line-glass); padding-top: var(--sp-1); display: flex; flex-direction: column; gap: var(--sp-1); }
.side-buckets-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xs);
  color: var(--tx3);
  letter-spacing: 0.3px;
  font-weight: 700;
  text-transform: uppercase;
}
.side-buckets-head span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.side-buckets-list { display: flex; flex-direction: column; gap: var(--sp-1); }
.side-bucket-loading, .side-bucket-empty { font-size: var(--fs-xs); color: var(--tx3); padding: var(--sp-0-5) 0; }
.side-bucket-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-0-5);
  background: var(--white-alpha-04);
  padding: var(--sp-0-5) var(--sp-1-5);
  border-radius: var(--r-sm);
  border: 1px solid var(--line-glass);
}
.side-bucket-meta { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); }
.side-bucket-name { color: var(--tx2); font-weight: 600; letter-spacing: 0.3px; }
.side-bucket-val {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--tx);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.side-bucket-val.ok { color: var(--green); }
.side-bucket-val.warn { color: var(--amber); }
.side-bucket-val.danger { color: var(--accent-red); }
.side-bucket-reset { color: var(--tx3); font-weight: normal; font-size: var(--fs-xs); }
.side-bucket-bar-bg { height: 3px; border-radius: var(--r-xs); background: var(--white-alpha-04); overflow: hidden; }
.side-bucket-bar-fill { height: 100%; border-radius: var(--r-xs); background: var(--green); transition: width var(--dur-slow) ease, background var(--dur-slow) ease; }
.side-bucket-bar-fill.ok { background: var(--green); }
.side-bucket-bar-fill.warn { background: var(--amber); }
.side-bucket-bar-fill.danger { background: var(--accent-red); }

/* Подвал панели */
.side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-glass);
  flex: 0 0 auto;
}

.btn-side-theme {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  width: 100%;
  padding: var(--sp-2) var(--sp-2-5);
  border-radius: var(--r-md);
  background: var(--white-alpha-04);
  border: 1px solid var(--line-glass);
  color: var(--tx2);
  font-size: var(--fs-sub);
  cursor: pointer;
  box-sizing: border-box;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease;
  user-select: none;
}
.btn-side-theme:hover { background: var(--violet-alpha-12); color: var(--tx); border-color: var(--violet-alpha-30); box-shadow: 0 0 8px var(--violet-alpha-20); }
.btn-side-theme:active { transform: scale(0.97); }
.side-theme-icon { font-size: var(--fs-md); width: 20px; display: grid; place-items: center; flex: 0 0 auto; }
.side-theme-label { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.side-user-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2-5);
  padding: var(--sp-1-5) var(--sp-2);
  border-radius: var(--r-md);
  background: var(--white-alpha-04);
  border: 1px solid var(--line-glass);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.side-user-ava {
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  background: var(--line);
  display: grid;
  place-items: center;
  font-size: var(--fs-base);
  flex: 0 0 auto;
  color: var(--accent-gold);
}
.side-user-info { display: flex; flex-direction: column; min-width: 0; overflow: hidden; white-space: nowrap; }
.side-user-name { font-size: var(--fs-sub); font-weight: 600; color: var(--tx); line-height: var(--lh-tight); }
.side-user-role { font-size: var(--fs-xs); color: var(--tx3); letter-spacing: 0.2px; }

/* ============================================================================
   СВЁРНУТЫЙ ВИД НА ДЕСКТОПЕ (COLLAPSED 64px, >= 769px)
   ============================================================================ */
@media (min-width: 769px) {
  :is(.sidebar-collapsed, .app.sidebar-collapsed) .app,
  .app.sidebar-collapsed {
    grid-template-columns: var(--side-w-collapsed) minmax(0, 1fr) !important;
  }

:is(.sidebar-collapsed, .app.sidebar-collapsed) .side { padding: var(--sp-3-5) var(--sp-2); align-items: center; width: var(--side-w-collapsed); }

:is(.sidebar-collapsed, .app.sidebar-collapsed) .side-head { padding: 0 0 var(--sp-1-5); justify-content: center; width: 100%; }

  :is(.sidebar-collapsed, .app.sidebar-collapsed) .side-head .side-brand { padding: 0; }

  :is(.sidebar-collapsed, .app.sidebar-collapsed) :is(
    .side-brand-text, .side-nav-text, .side-search-text, .side-search-kbd,
    .side-theme-label, .side-user-info,
    .side-badge-live, .side-badge-work, .side-badge-notes, .side-badge-citizens, .side-pulse-card
  ) { display: none !important; }

  :is(.sidebar-collapsed, .app.sidebar-collapsed) .side-search-wrap { display: flex; justify-content: center; width: 100%; }
  :is(.sidebar-collapsed, .app.sidebar-collapsed) :is(.btn-side-search, .btn-side-action, .side-nav-i, .btn-side-theme) { justify-content: center; padding: var(--sp-2); width: 44px; height: 44px; margin-inline: auto; }
  :is(.sidebar-collapsed, .app.sidebar-collapsed) .btn-side-collapse .collapse-icon { transform: rotate(180deg); }
  :is(.sidebar-collapsed, .app.sidebar-collapsed) .side-user-card { justify-content: center; padding: var(--sp-1); width: 44px; margin-inline: auto; }
}

/* ============================================================================
   АДАПТИВНОСТЬ И МОБИЛЬНЫЙ DRAWER (<= 768px, включая 412px)
   ============================================================================ */
@media (max-width: 768px) {
  .app,
  :is(html.sidebar-collapsed, body.sidebar-collapsed, .app.sidebar-collapsed) .app,
  .app.sidebar-collapsed {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
  }

.main { grid-column: 1 !important; grid-row: auto !important; padding-bottom: calc(var(--sp-12) + env(safe-area-inset-bottom, 0px)) !important; }

  .btn-side-collapse { display: none !important; }
  .btn-burger { display: inline-flex !important; margin-left: auto; }

  :is(.side, .side-panel, #gridSidePanel, #sidePanel) {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important; min-height: 56px !important; max-height: 56px !important;
    z-index: var(--z-drawer) !important;
    padding: var(--sp-2) var(--sp-3) !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-right: none !important;
    border-bottom: 1px solid var(--line) !important;
    background: var(--bg2) !important;
    box-shadow: var(--shadow-md);
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .side-head {
    border-bottom: none !important;
    padding: 0 !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  :is(.side, .side-panel, #gridSidePanel, #sidePanel) .side-drawer-container,
  .side-drawer-container {
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    width: min(320px, calc(100vw - 44px)) !important;
    max-width: calc(100vw - 44px) !important;
    height: calc(100vh - 56px) !important; height: calc(100dvh - 56px) !important;
    background: var(--bg2) !important;
    border-right: 1px solid var(--line) !important;
    padding: var(--sp-4) var(--sp-3) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-3) !important;
    z-index: var(--z-drawer) !important;
    box-shadow: var(--shadow-xl) !important;
    transform: translateX(-105%) !important;
    transition: transform var(--side-anim-dur) var(--side-anim-ease), visibility var(--side-anim-dur) var(--side-anim-ease) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    will-change: transform !important;
    box-sizing: border-box !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

:is(.side, .side-panel, #gridSidePanel, #sidePanel).drawer-open .side-drawer-container { transform: translateX(0) !important; visibility: visible !important; pointer-events: auto !important; }

/* Восстановление видимости поиска и подсказки Ctrl K в мобильном ящике */
  :is(.side, .side-panel, #gridSidePanel, #sidePanel) :is(.side-search-wrap, .btn-side-search, #btnCmdSearch),
  :is(.side-search-wrap, .btn-side-search, #btnCmdSearch) { display: flex !important; visibility: visible !important; opacity: 1 !important; }
  :is(.side, .side-panel, #gridSidePanel, #sidePanel) :is(.side-search-kbd, kbd.side-search-kbd, .btn-side-search kbd),
  .side-drawer-container :is(.side-search-kbd, kbd.side-search-kbd, .btn-side-search kbd),
  :is(.side-search-kbd, kbd.side-search-kbd, .btn-side-search kbd) {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: var(--fs-xs) !important;
    font-family: var(--mono);
    padding: var(--sp-px) var(--sp-1-25);
    border-radius: var(--r-xs);
    background: var(--white-alpha-08);
    border: 1px solid var(--line-glass);
    color: var(--tx2) !important;
    min-width: max-content !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* Автоматическое расширение служебных бейджей по контенту без сжатия и срезов */
  :is(.side-badge-live, .side-badge-work, .side-badge-kit, .side-badge-notes,
      .side-badge-citizens, .side-hq-wave) {
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    flex-shrink: 0 !important;
    font-size: var(--fs-xs) !important;
  }
  :is(.side-badge-live, .side-badge-work, .side-badge-kit, .side-badge-notes,
      .side-badge-citizens, .side-hq-wave)::before {
    display: none !important;
    content: none !important;
  }

  /* [1] Служебные метки и бейджи: max-content, nowrap, flex-shrink: 0, visible, clip (вес 0-1-0) */
  :is(.side-search-kbd, .side-badge-live, .side-badge-kit, .side-badge-work,
      .side-badge-notes, .side-badge-citizens, .side-hq-wave,
      .side-buckets-head, .side-pulse-k, .side-pulse-v, .side-pulse-title) {
    min-width: max-content !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: var(--fs-xs) !important;
    line-height: var(--lh-tight) !important;
  }

  /* Фаза штаба по ID вынесена отдельно для исключения подъема веса :is() до 1-0-0 */
  #sideHQPhase {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: var(--fs-xs) !important;
    line-height: var(--lh-tight) !important;
  }

  /* [2] Гибкие контейнеры и перенос длинных текстовых блоков миссии и шага штаба */
  .side-pulse-mission {
    display: flex !important;
    align-items: center !important;
    gap: var(--sp-1-5) !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  .side-pulse-mission .side-mission-text {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    font-weight: 600 !important;
    color: var(--violet-light) !important;
  }

  .side-hq-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: var(--sp-1-5) !important; flex-wrap: wrap !important; overflow: visible !important; max-width: 100% !important; }
  .side-hq-title { display: flex !important; align-items: center !important; gap: var(--sp-1) !important; flex: 1 1 auto !important; min-width: 0 !important; max-width: 100% !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .side-hq-title > span { min-width: 0 !important; overflow: visible !important; text-overflow: clip !important; }
  :is(.side-hq-wave, .badge.side-hq-wave, #sideHQWave) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; line-height: 1.2 !important; flex-shrink: 0 !important; flex-grow: 0 !important; min-width: max-content !important; width: auto !important; box-sizing: border-box !important; padding: var(--sp-0-5) var(--sp-1-25) !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; }
  .side-hq-action { white-space: normal !important; min-width: 0 !important; max-width: 100% !important; word-break: break-word !important; overflow-wrap: break-word !important; line-height: var(--lh-snug) !important; overflow: visible !important; text-overflow: clip !important; font-size: var(--fs-xs) !important; }

  .side-bucket-meta { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: var(--sp-1) !important; flex-wrap: wrap !important; overflow: visible !important; }
  .side-bucket-name,
  .side-bucket-val { white-space: nowrap !important; min-width: max-content !important; overflow: visible !important; text-overflow: clip !important; flex-shrink: 0 !important; }

  .side-pulse-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: var(--sp-1-5) !important; overflow: visible !important; }
  .side-pulse-item { min-width: 0 !important; overflow: visible !important; }
  .side-pulse-k, .side-pulse-v { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; min-width: max-content !important; flex-shrink: 0 !important; }
  .side-pulse-k { color: var(--tx2) !important; }

  :is(.side-brand-sub, .side-pulse-head, .side-pulse-title, .side-pulse-k, .side-pulse-v,
      .side-buckets-head, .side-bucket-loading, .side-bucket-empty,
      .side-bucket-name, .side-bucket-val, .side-bucket-reset, .side-user-role) {
    font-size: var(--fs-xs) !important;
  }

  /* [3] Канонический кегль >= 12px для всех 14 служебных подписей при открытии drawer */
  :is(.side-search-kbd, .side-badge-live, .side-badge-citizens, .side-badge-kit,
      .side-badge-work, .side-badge-notes, .side-pulse-k, .side-pulse-v,
      .side-pulse-title, .side-hq-wave, .side-hq-title,
      .side-hq-action, .side-buckets-head),
  #sideHQPhase {
    font-size: var(--fs-xs) !important;
  }

  /* Крупные навигационные элементы и профиль (без искажения кегля служебных меток) */
  :is(.side-user-name, .side-nav-i, .side-nav-text,
      .btn-side-search, .btn-side-action, .btn-side-theme, .side-theme-label) {
    font-size: var(--fs-body) !important;
  }
}

/* ============================================================================
   ULTRA-COMPACT (<= 390px)
   ============================================================================ */
@media (max-width: 390px) {
  .side-drawer-container { width: min(300px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px) !important; padding: var(--sp-3) var(--sp-2-5) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)) !important; gap: var(--sp-2) !important; }
  .side-pulse-card { padding: var(--sp-1-5) var(--sp-2) !important; gap: var(--sp-1) !important; overflow: visible !important; }
  .side-pulse-grid { gap: var(--sp-1) !important; overflow: visible !important; }
  .side-pulse-item { padding: var(--sp-0-5) var(--sp-1-5) !important; overflow: visible !important; }
  .side-nav-i { padding: var(--sp-2) var(--sp-2) !important; font-size: var(--fs-body) !important; }
}

/* ============================================================================
   СВЕТЛАЯ ТЕМА (LIGHT THEME)
   ============================================================================ */
html.light-theme .side { background: var(--card); border-right-color: var(--line); }
html.light-theme .side-brand-title { color: var(--tx); }
html.light-theme .btn-side-search { background: var(--card2); border-color: var(--line); color: var(--tx2); }
html.light-theme .btn-side-search:hover { background: var(--bg2); color: var(--tx); border-color: var(--violet-alpha-30); }
html.light-theme .side-search-kbd { background: var(--line); border-color: var(--line); color: var(--tx2); }
html.light-theme .side-nav-i { color: var(--tx2); }
html.light-theme .side-nav-i:hover { background: var(--bg2); color: var(--tx); }
html.light-theme .side-nav-i.active { background: var(--nav-active-bg); color: var(--nav-active-tx); box-shadow: inset 3px 0 0 var(--violet); }
html.light-theme .side-nav-i.active .side-nav-icon { color: var(--violet); }
html.light-theme .side-nav-i.active .side-nav-text { color: var(--nav-active-tx); }
html.light-theme .side-badge-live { background: var(--violet-dark); color: var(--white); border-color: var(--violet-dark); }
html.light-theme .side-badge-work { background: var(--badge-work-bg); color: var(--badge-work-tx); border-color: var(--badge-work-border); }
html.light-theme .side-badge-kit { background: var(--nav-active-bg); color: var(--violet-dark); border-color: var(--violet-alpha-40); }
html.light-theme .side-badge-notes { background: var(--amber-alpha-12); color: var(--amber); border-color: var(--amber-alpha-40); }
html.light-theme .side-badge-notes.has-notes { background: var(--amber-alpha-20); color: var(--amber); border-color: var(--amber); box-shadow: 0 0 6px var(--amber-alpha-20); }
html.light-theme .side-badge-citizens { background: var(--blue-alpha-12); color: var(--blue); border-color: var(--blue-alpha-30); }
html.light-theme :is(.side-pulse-k, .side-hq-action, .side-bucket-name) { color: var(--tx2); }
html.light-theme .side-pulse-card { background: var(--card2); border-color: var(--line); box-shadow: var(--shadow-sm); }
html.light-theme .side-pulse-head { color: var(--tx); }
html.light-theme .side-pulse-item { background: var(--card); border-color: var(--line); }
html.light-theme .side-pulse-v { color: var(--tx); }
html.light-theme .side-pulse-v.highlight { color: var(--blue); }
html.light-theme .side-pulse-v.success { color: var(--green); }
html.light-theme .side-mission-text { color: var(--violet-dark); }
html.light-theme :is(.side-pulse-hq, .side-bucket-item) { background: var(--card); border-color: var(--line); }
html.light-theme .side-hq-title { color: var(--tx); }
html.light-theme .side-hq-wave { background: var(--nav-active-bg); color: var(--violet-dark); border-color: var(--violet-alpha-40); }
html.light-theme .side-bucket-val.ok { color: var(--green); }
html.light-theme .side-bucket-val.warn { color: var(--amber); }
html.light-theme :is(.btn-side-theme, .side-user-card, .btn-side-collapse, .btn-burger) { background: var(--card2); border-color: var(--line); }
html.light-theme :is(.btn-side-theme, .btn-burger) { color: var(--tx); }
html.light-theme :is(.btn-side-theme, .btn-burger):hover { background: var(--bg2); color: var(--tx); }
html.light-theme .btn-side-collapse { color: var(--tx2); }
html.light-theme .side-backdrop { background: var(--bg-backdrop-light); }

/* Подложка выдвижного ящика (всегда вне потока) */
.side-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: var(--bg-backdrop);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-backdrop) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-smooth) var(--ease-out);
}

.side-backdrop.open { opacity: 1; pointer-events: auto; }

/* ============================================================================
   ДОСТУПНОСТЬ: PREFERS-REDUCED-MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
.side,
  .side-drawer-container,
  .btn-side-collapse,
  .btn-burger,
  .side-backdrop,
  .side-pulse-dot,
  .side-bucket-bar-fill { transition-duration: var(--dur-instant) !important; animation-duration: var(--dur-instant) !important; }
}