/* Generated by scripts/build-static-bundles.js. Do not edit manually. */
/* css/core/variables.css */
/* === CSS Variables === */
:root {
  --color-team-1: #FFC107;
  --color-team-2: #2196F3;
  --color-team-3: #4CAF50;
  --color-team-4: #F44336;
  --color-team-5: #673AB7;

  --color-primary: #0061A4;
  --color-primary-light: #D1E4FF;
  --color-surface: #F8FAFF;
  --color-on-surface: #1A1C1E;
  --color-on-surface-secondary: #43474E;
  --color-border: #BFC6D4;
  --color-bg: #E6EBF4;
  --color-hover: #DEE6F2;
  --color-active: #D7E3F7;

  --sidebar-left-width: 280px;
  --sidebar-left-collapsed-width: 56px;
  --sidebar-right-width: 280px;
  --sidebar-right-collapsed-width: 56px;
  --header-height: 48px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.12);

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* === Dark Theme === */
[data-theme="dark"] {
  --color-primary: rgba(157, 202, 255, 0.8);
  --color-primary-light: #00497D;
  --color-surface: #181B22;
  --color-on-surface: rgba(226, 226, 229, 0.9);
  --color-on-surface-secondary: #C3C7CF;
  --color-border: #414754;
  --color-bg: #10131A;
  --color-hover: #272B35;
  --color-active: #00497D;
  --shadow: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.4);
}

/* css/core/reset.css */
/* === Reset & Base === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  min-width: 1200px;
}

body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-on-surface);
  line-height: 1.5;
  overflow: hidden;
  height: 100vh;
}


/* === Scrollbar — overlay, скрывается, появляется при скролле === */
.sidebar,
.main-content {
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 6px;
  background: transparent;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s;
}
.scrolling::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
}
.scrolling::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.25);
}
[data-theme="dark"] .scrolling::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
}
[data-theme="dark"] .scrolling::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.25);
}

/* css/core/layout.css */
/* === Header === */
.app-header {
  height: var(--header-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 10;
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.app-header__logo {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 6px;
  object-fit: contain;
  user-select: none;
}

.app-header__titles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  line-height: 1.15;
}

.app-header__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__shift {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-on-surface-secondary);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.app-header__shift-text {
  opacity: 0.6;
}

.app-header__shift-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.app-header__notice {
  position: relative;
  height: 40px;
  margin: 0 24px;
  padding: 0 48px 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1.25;
  color: rgba(230, 115, 0, 0.95);
  text-align: center;
  background: transparent;
  border: none;
}

.app-header__notice-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(230, 115, 0, 0.95);
  flex-shrink: 0;
}

[data-theme="dark"] .app-header__notice,
[data-theme="dark"] .app-header__notice-arrow {
  color: #FFB74D;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.app-header__actions .btn-text + .btn-icon {
  margin-left: 10px;
}

/* Между иконками поддержки, темы и профиля отступ заметно больше, чем
   общий gap: дополнительный margin-left поверх flex-gap, чтобы они не
   «слипались» визуально при уменьшенных размерах кнопок. */
.app-header__actions .btn-icon + .btn-icon {
  margin-left: 8px;
}

.btn-icon {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-secondary);
  font-size: 18px;
  transition: background 0.15s;
}
.btn-icon svg {
  width: 22px;
  height: 22px;
}

.btn-icon:hover {
  background: var(--color-hover);
}

/* ============================================================

   Shared tool components — единая дизайн-система для
   инструментов центральной панели.
   Используйте .tool-toolbar, .tool-tabs, .tool-section,
   .tool-accordion, .tool-modal и .btn вместо тул-специфичных
   BEM-классов. Специфичные расширения допустимы, но базовая
   геометрия и состояния живут тут.
   ============================================================ */

/* === Main Layout ===
   Flexbox вместо CSS Grid — для совместимости со старыми браузерами,
   которые не поддерживают `1fr` в grid-template-columns. */
.app-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}


/* === Sidebars === */
.sidebar {
  background: var(--color-surface);
  border-right: none;
  padding: 0;
}

.sidebar-left {
  flex: 0 0 var(--sidebar-left-width);
  width: var(--sidebar-left-width);
  transition: flex-basis 0.25s ease, width 0.25s ease;
}

.app-layout--sidebar-collapsed .sidebar-left {
  flex-basis: var(--sidebar-left-collapsed-width);
  width: var(--sidebar-left-collapsed-width);
}

.sidebar-left::-webkit-scrollbar-track {
  background: var(--color-bg);
}

.sidebar-right {
  flex: 0 0 var(--sidebar-right-width);
  width: var(--sidebar-right-width);
  border-right: none;
  border-left: none;
  transition: flex-basis 0.25s ease, width 0.25s ease;
}

.app-layout--sidebar-right-collapsed .sidebar-right {
  flex-basis: var(--sidebar-right-collapsed-width);
  width: var(--sidebar-right-collapsed-width);
}


/* === Collapsed Right Sidebar === */
.sidebar-right--collapsed {
  overflow-x: hidden;
}

.sidebar-right--collapsed .sidebar__header-text {
  display: none;
}

.sidebar-right--collapsed .sidebar__header {
  justify-content: center;
  padding: 0 8px;
}

.sidebar-right--collapsed .docs-search-wrap {
  display: none;
}

.sidebar-right--collapsed .docs-list {
  padding: 0 0 16px;
}

.sidebar-right--collapsed .doc-item {
  /* Правый padding полностью убран — текст с 3 символами занимает всю
     оставшуюся ширину вплоть до правого края сайдбара. */
  padding: 10px 0 10px 8px;
  min-height: 39px;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}

.sidebar-right--collapsed .docs-list .doc-item__short,
.sidebar-right--collapsed .docs-list .doc-item__full {
  display: none;
}

.sidebar-right--collapsed .doc-item__short-collapsed {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}

.sidebar-right--collapsed .doc-item__icon {
  font-size: 18px;
  color: var(--color-on-surface-secondary);
  opacity: 0.5;
  flex-shrink: 0;
}

.sidebar-right--collapsed .doc-item__short-collapsed-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-right--collapsed .doc-item--active .doc-item__short-collapsed,
.sidebar-right--collapsed .doc-item--active .doc-item__icon {
  color: var(--color-primary);
  font-weight: 700;
}

.sidebar-right--collapsed .doc-section-item {
  justify-content: center;
  padding: 10px 0;
}

.sidebar-right--collapsed .doc-section-item__info {
  display: none;
}
.sidebar-right--collapsed .doc-section-item--active,
.sidebar-right--collapsed .doc-section-item--active:hover {
  box-shadow: none;
}

.sidebar-right--collapsed .doc-section-item__icon {
  width: 24px;
  height: 24px;
}

.sidebar__header {
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-on-surface-secondary);
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  /* Свёрнутый вариант = просто surface (старый цвет). Градиент надевается
     поверх через ::before — это даёт плавную анимацию opacity при
     разворачивании / сворачивании. */
  background: var(--color-surface);
  z-index: 5;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  cursor: pointer;
}

/* Градиент от surface к color-mix(primary 20%) поверх базового фона.
   Направление зависит от стороны сайдбара: у левого (инструменты) градиент
   идёт справа налево (primary справа, surface слева); у правого (документы)
   — наоборот, слева направо. При сворачивании прячем через opacity, чтобы
   переход был плавным (linear-gradient ↔ solid сам по себе не анимируется). */
.sidebar__header::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.sidebar .sidebar__header::before {
  background: linear-gradient(to right,
    color-mix(in srgb, var(--color-primary) 20%, var(--color-surface)),
    var(--color-bg));
}
.sidebar-right .sidebar__header::before {
  background: linear-gradient(to left,
    color-mix(in srgb, var(--color-primary) 20%, var(--color-surface)),
    var(--color-bg));
}
.sidebar--collapsed .sidebar__header::before,
.sidebar-right--collapsed .sidebar__header::before {
  opacity: 0;
}
/* Дочерние элементы должны быть над ::before. */
.sidebar__header > * {
  position: relative;
  z-index: 1;
}

.sidebar__toggle {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s;
  flex-shrink: 0;
}

.sidebar__toggle svg {
  width: 28px;
  height: 28px;
}

.sidebar--collapsed .sidebar__toggle {
  transform: rotate(180deg);
}

.sidebar-right--collapsed .sidebar__toggle--right {
  transform: rotate(180deg);
}



/* === Collapsed Sidebar === */
.sidebar--collapsed {
  overflow-x: hidden;
}

.sidebar--collapsed .sidebar__header-text {
  display: none;
}

.sidebar--collapsed .sidebar__header {
  justify-content: center;
  padding: 0 8px;
}

.sidebar--collapsed .tool-item {
  justify-content: center;
  padding: 10px 0;
}

.sidebar--collapsed .tool-item__info {
  display: none;
}

.sidebar--collapsed .tool-item__icon {
  width: 24px;
  height: 24px;
}


/* === Main Content (Center) === */
.main-content {
  flex: 1 1 0;
  min-width: 0;
  overflow-y: auto;
  padding: 20px 16px;
  background: var(--color-bg);
}


/* === Tool Placeholder === */
.tool-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  text-align: center;
  color: var(--color-on-surface-secondary);
}

.tool-placeholder__icon {
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  color: var(--color-primary);
}
.tool-placeholder__icon svg {
  width: 100%;
  height: 100%;
}

.tool-placeholder__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 12px;
}

.tool-placeholder__text {
  font-size: 15px;
  max-width: 420px;
  line-height: 1.6;
  margin-bottom: 32px;
}

.tool-placeholder__stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 640px;
  margin-bottom: 36px;
}

.store-link {
  display: block;
  transition: transform 0.15s, filter 0.15s;
}
.store-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.store-link__badge {
  height: 56px;
  display: block;
}

.tool-placeholder__socials-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-on-surface-secondary);
  margin-bottom: 14px;
}

.tool-placeholder__socials {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.social-link {
  display: block;
  transition: transform 0.15s, filter 0.15s;
}
.social-link:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.social-link__badge {
  width: 48px;
  height: 48px;
  display: block;
}


/* === Placeholder === */
.placeholder-block {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-sm);
  text-align: center;
  padding: 16px;
}

/* css/components/search-count.css */
/* Auto-extracted component */
/* --- Search count --- */
.search-count {
  display: inline-block;
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  white-space: nowrap;
  align-self: center;
}
.search-count:empty {
  display: none;
}

/* css/components/buttons.css */
/* Auto-extracted component */
/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  color: var(--color-on-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s, filter 0.15s;
  white-space: nowrap;
  text-decoration: none;
}
.btn svg { display: block; }
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.btn[disabled],
.btn--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn--primary:hover:not([disabled]) {
  filter: brightness(1.08);
}
[data-theme="dark"] .btn--primary { color: #000; }

.btn--secondary {
  background: transparent;
  color: var(--color-on-surface);
  border-color: var(--color-border);
}
.btn--secondary:hover:not([disabled]) {
  background: var(--color-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--ghost {
  background: transparent;
  border: 1px dashed var(--color-border);
  color: var(--color-on-surface);
}
.btn--ghost:hover:not([disabled]) {
  background: var(--color-hover);
  border-color: var(--color-primary);
  border-style: solid;
  color: var(--color-primary);
}

.btn--text {
  background: transparent;
  border: none;
  color: var(--color-on-surface-secondary);
  padding: 6px 0;
}
.btn--text:hover:not([disabled]) {
  color: var(--color-primary);
  text-decoration: underline;
}

.btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  color: var(--color-on-surface-secondary);
}
.btn--icon:hover:not([disabled]) {
  background: var(--color-hover);
  color: var(--color-on-surface);
}

.btn--sm {
  padding: 4px 12px;
  font-size: 13px;
}

/* css/components/toolbar.css */
/* Auto-extracted component */
/* --- Toolbar (sticky-шапка страниц инструментов) --- */
.tool-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 48px;
  padding: 0 16px;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 5;
  border-bottom: 1px solid var(--color-border);
}
.tool-toolbar--dense {
  padding: 0 4px;
}
.tool-toolbar__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-on-surface);
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tool-toolbar__spacer { flex: 1; }

/* --- Tabs (flex-row, tinted active) --- */
.tool-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.tool-tabs--sticky {
  position: sticky;
  top: 0;
  z-index: 5;
}
.tool-tabs--sticky-under-toolbar {
  position: sticky;
  top: 48px;
  z-index: 4;
}
.tool-tab {
  flex: 1;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  transition: background 0.15s, color 0.15s;
}
.tool-tab:hover { background: var(--color-hover); }
.tool-tab--active {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--color-primary);
  font-weight: 700;
}
.tool-tab--active:hover {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* css/components/section.css */
/* Auto-extracted component */
/* --- Section (группа с заголовком и подзаголовком) --- */
.tool-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tool-section__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-on-surface);
  padding: 8px 4px 0;
  margin: 0;
}
.tool-section--lg .tool-section__title {
  font-size: 18px;
  padding: 8px 4px;
}
.tool-section__subtitle {
  font-size: 12px;
  font-style: italic;
  font-weight: 300;
  color: var(--color-on-surface-secondary);
  padding: 0 4px 4px;
  margin: 0;
}
.tool-section--lg .tool-section__subtitle {
  font-style: normal;
  font-weight: 400;
  padding: 0 4px;
}
.tool-section__hint {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  padding: 0 4px;
  margin: 0;
}

/* css/components/accordion.css */
/* Auto-extracted component */
/* --- Accordion (раскрываемый блок) --- */
.tool-accordion {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tool-accordion__header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 8px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  transition: color 0.15s, background 0.15s;
}
.tool-accordion__header:hover .tool-accordion__title {
  color: var(--color-primary);
}
.tool-accordion__title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0;
  line-height: 1.35;
}
.tool-accordion__subtitle {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--color-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tool-accordion--open .tool-accordion__subtitle {
  white-space: normal;
}
.tool-accordion__chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-on-surface-secondary);
  transition: transform 0.2s;
}
.tool-accordion--open .tool-accordion__chevron {
  transform: rotate(180deg);
}
.tool-accordion__body {
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease, padding 0.3s ease, margin 0.3s ease;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.tool-accordion__body > .tool-accordion__body-inner {
  min-height: 0;
  overflow: hidden;
}
.tool-accordion--open > .tool-accordion__body {
  grid-template-rows: 1fr;
}

/* Card-вариант: поверхностная карточка (gdzs-block, calendar-block) */
.tool-accordion--card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
}
.tool-accordion--card > .tool-accordion__header {
  padding: 0;
}
.tool-accordion--card .tool-accordion__title {
  font-size: 16px;
}
.tool-accordion--card .tool-accordion__chevron {
  width: 28px;
  height: 28px;
}
.tool-accordion--card > .tool-accordion__body {
  margin-top: 0;
}
.tool-accordion--card.tool-accordion--open > .tool-accordion__body {
  margin-top: 14px;
}

/* Row-вариант: строка списка с нижней границей (upr-item, fyz-item) */
.tool-accordion--row {
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}
.tool-accordion--row > .tool-accordion__body {
  padding: 0 14px;
  margin: 0 8px;
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-surface);
}
.tool-accordion--row.tool-accordion--open > .tool-accordion__body {
  padding-top: 12px;
  padding-bottom: 16px;
  margin-bottom: 4px;
}

/* Bordered-вариант: рамка 1px (usl-block) */
.tool-accordion--bordered {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tool-accordion--bordered > .tool-accordion__header {
  padding: 10px 14px;
}
.tool-accordion--bordered > .tool-accordion__header:hover {
  background: var(--color-hover);
}
.tool-accordion--bordered.tool-accordion--open > .tool-accordion__body {
  border-top: 1px solid var(--color-border);
}

/* css/components/modal.css */
/* === Shared tool-modal === */
/* Базовые стили для .tool-modal-overlay / .tool-modal — используются
   инструментами (staff, foam, uprazhnenia, tests, stopwatch_history,
   ptv). Тул-специфичные расширения живут в css/tools/<tool>.css. */
.tool-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.tool-modal-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

.tool-modal {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 90%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--color-on-surface);
}
.tool-modal--sm { max-width: 520px; }
.tool-modal--md { max-width: 720px; }
.tool-modal--lg { max-width: 960px; }

.tool-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 10px 20px;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
  flex-shrink: 0;
}

.tool-modal__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--color-on-surface);
}

.tool-modal__close {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.tool-modal__close:hover {
  background: var(--color-hover);
  color: var(--color-on-surface);
}
.tool-modal__close svg {
  width: 18px;
  height: 18px;
}

.tool-modal__body {
  padding: 20px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.tool-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* === pcAlert / pcConfirm — Promise-based замена нативных alert()/confirm(). */
.pc-dialog {
  width: 100%;
  max-width: 440px;
}

/* Заголовок всегда в аппбаре, одной строкой с троеточием если не влезает. */
.pc-dialog__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.pc-dialog__body {
  padding: 16px 20px;
}

.pc-dialog__line {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-on-surface);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.pc-dialog__line:last-child { margin-bottom: 0; }
.pc-dialog__line:empty { display: none; }

/* Произвольный HTML в теле — используется, например, для карточки слоя
   в подтверждении загрузки. */
.pc-dialog__extra {
  margin-top: 8px;
}
.pc-dialog__extra:first-child {
  margin-top: 0;
}

/* Список пар ключ-значение для расширенной информации. */
.pc-dialog__kv {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 6px;
  font-size: 13px;
}
.pc-dialog__kv dt {
  color: var(--color-on-surface-secondary);
  font-weight: 500;
}
.pc-dialog__kv dd {
  margin: 0;
  color: var(--color-on-surface);
  word-break: break-word;
}

.pc-dialog__footer {
  padding: 10px 16px 14px;
}

/* Лейбл и подсказка для полей в кастомных модалках. */
.pc-dialog__field-label {
  display: block;
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-surface-secondary);
}
.pc-dialog__hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  line-height: 1.4;
}

/* Строка с тумблером в теле диалога. Сам input стилизован глобально
   как iOS-свитчер в css/components/checkbox.css — здесь не переопределяем. */
.pc-dialog__checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--color-on-surface);
  cursor: pointer;
  user-select: none;
}

/* Инпут pcPrompt в теле диалога. */
.pc-prompt-input {
  width: 100%;
  font: inherit;
  font-size: 15px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--color-on-surface);
  outline: none;
  transition: border-color .15s, background-color .15s;
  box-sizing: border-box;
}
.pc-prompt-input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

/* Красная primary-кнопка для destructive-действий (pcConfirm с danger:true). */
.pc-dialog__btn--danger {
  background: #D32F2F !important;
  color: #fff !important;
}
.pc-dialog__btn--danger:hover {
  background: #B71C1C !important;
}


/* === Modal === */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay--visible {
  opacity: 1;
  pointer-events: all;
}

.modal-content {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 24px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-content__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

.modal-content__text {
  font-size: 14px;
  color: var(--color-on-surface-secondary);
  margin-bottom: 20px;
  line-height: 1.6;
}

.modal-content__close {
  display: inline-block;
  padding: 8px 24px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-family);
}


/* === Settings Modal Popup === */
.modal-overlay {
  transition: opacity 0.25s ease;
}

.modal-content--settings {
  max-width: 440px;
  padding: 0;
  overflow: hidden;
}

.modal-content__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 10px 20px;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
}

.modal-content__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.modal-content__close-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.modal-content__close-btn:hover {
  background: var(--color-hover);
  color: var(--color-on-surface);
}
.modal-content__close-btn svg {
  display: block;
  width: 18px;
  height: 18px;
}

.modal-content__body {
  padding: 20px 24px 24px;
  max-height: 70vh;
  overflow-y: auto;
}

/* === Info Modal (Поддержка / Сообщество / Скачать) === */
#info-modal-overlay .modal-content__body {
  padding: 16px 20px 20px;
}


/* === Profile modal === */
.profile-modal {
  --profile-modal-block-radius: var(--radius);

  background: var(--color-surface);
  border-radius: var(--profile-modal-block-radius);
  box-shadow: var(--shadow-md);
  padding: 0;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--color-on-surface);
}

.profile-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 10px 20px;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
  flex-shrink: 0;
}

.profile-modal__title {
  font-size: 16px;
  font-weight: 600;
}

.profile-modal__close {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: var(--profile-modal-block-radius);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-secondary);
  transition: background 0.15s;
  flex-shrink: 0;
}
.profile-modal__close:hover {
  background: var(--color-hover);
}
.profile-modal__close svg {
  width: 18px;
  height: 18px;
}

.profile-modal__body {
  padding: 20px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}

.profile-modal__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-modal__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-modal__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.profile-modal__field input {
  height: 42px;
  padding: 0 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--profile-modal-block-radius);
  font-size: 15px;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.profile-modal__field input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.profile-modal__input-wrap {
  position: relative;
}
.profile-modal__input-wrap input {
  width: 100%;
  padding-right: 44px;
  box-sizing: border-box;
}
.profile-modal__eye {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--profile-modal-block-radius);
  color: var(--color-on-surface-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.profile-modal__eye:hover {
  background: var(--color-hover);
  color: var(--color-on-surface);
}

.profile-modal__submit {
  height: 44px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--profile-modal-block-radius);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: opacity 0.15s, filter 0.15s;
  margin-top: 4px;
}
[data-theme="dark"] .profile-modal__submit {
  color: #000;
}
.profile-modal__submit:hover:not(:disabled) {
  filter: brightness(1.05);
}
.profile-modal__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.profile-modal__error {
  font-size: 13px;
  color: #D32F2F;
  line-height: 1.4;
  background: color-mix(in srgb, #D32F2F 10%, transparent);
  border-radius: var(--profile-modal-block-radius);
  padding: 10px 12px;
}
[data-theme="dark"] .profile-modal__error {
  color: #F28B82;
}
.profile-modal__secret {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}

.profile-modal__hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-on-surface-secondary);
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
}

.profile-modal__sync {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--profile-modal-block-radius);
  background: var(--color-hover);
  cursor: pointer;
  user-select: none;
}
.profile-modal__sync input[type="checkbox"] {
  grid-row: 1 / span 2;
}
.profile-modal__sync-label {
  font-size: 14px;
  color: var(--color-on-surface);
}
.profile-modal__sync-note {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}
.profile-modal__sync--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.profile-modal__sync--disabled input[type="checkbox"] {
  cursor: not-allowed;
}

/* Блок ручной синхронизации (две кнопки + строка last-save).
   Внешний вид совпадает с ServerSyncBlock в мобильном Flutter:
   - подложка primary с прозрачностью ~12% (как .withAlpha(30))
   - кнопки в строку (no wrap), занимают 1fr/1fr ширины. */
.profile-modal__sync-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: var(--profile-modal-block-radius);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
/* Бесплатный пользователь: блок полупрозрачный, любой клик в нём
   перехватывается JS-обработчиком и открывает попап оплаты. Внутренние
   <button> отключены через pointer-events, чтобы не отъедать клик. */
.profile-modal__sync-block--locked {
  opacity: 0.5;
  cursor: pointer;
}
.profile-modal__sync-block--locked .profile-modal__sync-btn {
  pointer-events: none;
}
.profile-modal__sync-last {
  font-size: 12px;
  color: color-mix(in srgb, var(--color-primary) 70%, transparent);
}
.profile-modal__sync-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.profile-modal__sync-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border-radius: var(--profile-modal-block-radius);
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.profile-modal__sync-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.profile-modal__sync-btn:active {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.profile-modal__sync-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
.profile-modal__sync-note-text {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  line-height: 1.35;
}

/* Полноэкранный блокирующий оверлей при Load с сервера. */
.pc-load-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 10000;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.pc-load-overlay__spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: pc-load-spin 0.9s linear infinite;
}
.pc-load-overlay__text {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
@keyframes pc-load-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.profile-modal__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}

.profile-modal__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg);
  flex-shrink: 0;
}
.profile-modal__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-secondary);
}
.profile-modal__avatar--fallback svg {
  width: 60px;
  height: 60px;
}

.profile-modal__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.profile-modal__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-modal__phone {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
}

.profile-modal__badge {
  display: inline-block;
  margin-top: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  width: fit-content;
}
.profile-modal__badge--paid {
  background: color-mix(in srgb, #4CAF50 18%, transparent);
  color: #2E7D32;
}
[data-theme="dark"] .profile-modal__badge--paid {
  color: #81C784;
}
.profile-modal__badge--free {
  background: var(--color-hover);
  color: var(--color-on-surface-secondary);
}

.profile-modal__logout {
  height: 40px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--profile-modal-block-radius);
  color: var(--color-on-surface);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: background 0.15s;
}
.profile-modal__logout:hover {
  background: var(--color-hover);
}

.profile-modal__pay {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: var(--profile-modal-block-radius);
}

.profile-modal__pay-btn {
  height: 40px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--profile-modal-block-radius);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: not-allowed;
  opacity: 0.6;
}

[data-theme="dark"] .profile-modal__pay-btn {
  color: #000;
}

.profile-modal__pay-hint {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-on-surface-secondary);
}

.profile-modal__pay-hint a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.profile-modal__pay-hint a:hover {
  text-decoration: none;
}

/* css/components/yandex-route-picker.css */
/* === Yandex Route Picker — универсальная модалка выбора маршрута ===
   Используется из инструментов (fuel и др.) через window.openYandexRoutePicker.
   Базируется на .tool-modal / .tool-modal-overlay. */

.yrp-modal {
  width: min(960px, 95vw);
}

.yrp-body {
  padding: 0;
  position: relative;
  display: flex;
  overflow: hidden;
}

.yrp-map {
  flex: 1;
  width: 100%;
  min-height: 60vh;
  border-radius: 0;
  background: var(--color-bg);
  cursor: crosshair;
}

.yrp-status {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
  pointer-events: none;
  text-align: center;
  padding: 0 24px;
}

.yrp-status--error {
  color: #D32F2F;
  pointer-events: auto;
}

[data-theme="dark"] .yrp-status--error {
  color: #F28B82;
}

.yrp-footer {
  justify-content: space-between;
  gap: 12px;
}

.yrp-zoom {
  display: flex;
  gap: 6px;
}

.yrp-zoom-btn {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-on-surface);
  cursor: pointer;
  transition: background 0.15s;
}

.yrp-zoom-btn:hover {
  background: var(--color-hover);
}

.yrp-distance {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-on-surface);
  min-height: 24px;
}

.yrp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-on-surface);
  cursor: pointer;
  user-select: none;
}

.yrp-toggle__label {
  white-space: nowrap;
}

.yrp-confirm {
  height: 40px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family);
  transition: opacity 0.15s, filter 0.15s;
}

.yrp-confirm:hover:not(:disabled) {
  filter: brightness(1.05);
}

.yrp-confirm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

[data-theme="dark"] .yrp-confirm {
  color: #000;
}

/* css/components/drag-reorder.css */
/* === Drag reorder (long-press) === */
.tool-item.long-press-pending,
.doc-item.long-press-pending {
  transform: scale(0.98);
  transition: transform 0.12s ease;
}
.tool-item.dragging,
.doc-item.dragging {
  opacity: 0.9;
  transform: scale(1.03);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  border-radius: 6px;
  background: var(--color-surface);
  transition: none;
  cursor: grabbing;
}
.tool-item.drag-placeholder,
.doc-item.drag-placeholder {
  background: transparent !important;
  border: 1px dashed var(--color-border) !important;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: default;
  opacity: 0.6;
}
.tool-item:not(.tool-item--locked),
.doc-item {
  touch-action: none;
}
.tool-item--locked {
  cursor: pointer;
}

.tool-item__icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-on-surface-secondary);
}

.tool-item__icon svg {
  width: 100%;
  height: 100%;
}

.tool-item--active .tool-item__icon {
  color: var(--color-primary);
}

.tool-item__info {
  flex: 1;
  min-width: 0;
}

.tool-item__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tool-item__subtitle {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.65;
}

/* css/components/yandex-ad.css */
/* === Yandex РСЯ ad banner === */
.yandex-ad {
  width: 100%;
  margin: 16px 0;
  display: flex;
  justify-content: center;
}
.yandex-ad__slot {
  width: 100%;
  min-height: 90px;
}
.yandex-ad:empty,
.yandex-ad__slot:empty {
  min-height: 0;
}

/* Если пользователь платный (или inline-слоты отключены в пользу общего
   `.tool-toolbar-ad`) — слоты остаются пустыми; убираем их из layout,
   чтобы не было лишних отступов через gap/margin у родителей. */
#calendar-ad-slot:empty,
.upr-ad-slot:empty,
.fyz-ad-slot:empty,
.gdzs-ad-slot:empty,
.conspects__ad-li:empty,
.staff-ad-slot:empty,
.foam-ad-slot:empty,
.usl-ad-slot:empty,
.oxpa-ad-slot:empty,
.med-ad-slot:empty,
.articles-ad-slot:empty,
.newdocs-ad-li:empty,
.rtp-ad-slot:empty,
.ptv-ad-slot:empty,
.obyaz-ad-slot:empty,
.norma-ad-slot:empty,
.fuel-ad-slot:empty,
.map2-ad-slot:empty,
.pa-ad-slot:empty,
.pensia-ad-slot:empty,
.graph-ad-slot:empty,
.rashod-ad-slot:empty,
.otpuska-ad-slot:empty,
.articles-card--ad:empty,
.market-card--ad:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.newdocs-ad-li {
  list-style: none;
  margin: 8px 0;
}
.newdocs-ad-li .yandex-ad { margin: 0; }

.obyaz-ad-slot { display: block; }
.obyaz-ad-slot--intro { margin: 12px 0 16px; }
.obyaz-ad-slot--inside { margin-top: 12px; }
.obyaz-ad-slot .yandex-ad { margin: 0; }

/* css/components/tool-slots.css */
/* === Глобальный рекламный баннер (overlay внизу центральной панели) ===
   Позиционирован fixed над .main-content. Стороны (left/right) согласованы
   с CSS-переменными сайдбаров; при collapsed состоянии ширина меняется
   через :has()-селектор на body. Контейнер прозрачный и без бордеров —
   сам креатив РСЯ рисует фон. */
:root {
  /* 90px баннер + ~34px бейдж «Убрать всю рекламу» + 8px запас */
  --global-ad-safe-bottom: 132px;
}
#global-bottom-ad {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-left-width);
  right: var(--sidebar-right-width);
  /* 35 > 30 (map2-table-editor), но < 10000 (модалки редакторов таблицы) —
     баннер всегда поверх самой таблицы, но не мешает всплывающим диалогам. */
  z-index: 35;
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  transition: left 0.25s ease, right 0.25s ease, bottom 0.25s ease;
  pointer-events: auto;
}
/* На map2 поднимаем баннер на 40px, чтобы не перекрывал нижнюю панель карты. */
body:has(.map2-page) #global-bottom-ad {
  bottom: 40px;
}
/* В редакторе схем — на высоту нижней строки drawio со вкладками страниц
   (.geTabContainer внутри iframe). */
body:has(.schemes-page--editor) #global-bottom-ad {
  bottom: 32px;
}
#global-bottom-ad:empty {
  display: none;
}
body:has(.app-layout--sidebar-collapsed) #global-bottom-ad {
  left: var(--sidebar-left-collapsed-width);
}
body:has(.app-layout--sidebar-right-collapsed) #global-bottom-ad {
  right: var(--sidebar-right-collapsed-width);
}
#global-bottom-ad .yandex-ad {
  margin: 0;
  width: 100%;
  max-width: 970px;
}
#global-bottom-ad .yandex-ad__slot {
  width: 100%;
  min-height: 90px;
  max-height: 90px;
  overflow: hidden;
}

/* Главный скролл-контейнер: оставляем место под баннер. */
.main-content {
  padding-bottom: var(--global-ad-safe-bottom);
}

/* Внутренние скролл-контейнеры инструментов. Там, где страница инструмента
   занимает всю высоту main-content и scroll живёт глубже, main-content не
   прокручивается — добавляем запас снизу прямо на scroll-контейнер. */
.ai-messages,
.conspects__cat-list,
.conspects__list,
.gdzs-sizod__list,
.gdzs-sizod__detail,
.map2-layers-panel__body,
.map2-hydrant-panel__body {
  padding-bottom: var(--global-ad-safe-bottom);
  scroll-padding-bottom: var(--global-ad-safe-bottom);
}

/* === Тул-специфичные обёртки слотов === */
.staff-ad-slot,
.foam-ad-slot,
.oxpa-ad-slot,
.med-ad-slot,
.rashod-ad-slot {
  display: block;
  margin: 12px 0;
}
.staff-ad-slot .yandex-ad,
.foam-ad-slot .yandex-ad,
.oxpa-ad-slot .yandex-ad,
.med-ad-slot .yandex-ad,
.rashod-ad-slot .yandex-ad { margin: 0; }

.usl-ad-slot { display: block; }
.usl-ad-slot--top { margin: 0 0 16px; }
.usl-ad-slot--section { margin-top: 12px; }
.usl-ad-slot .yandex-ad { margin: 0; }

.rtp-ad-slot { display: block; }
.rtp-ad-slot--top { margin: 0 0 16px; }
.rtp-ad-slot--section { margin-top: 12px; }
.rtp-ad-slot .yandex-ad { margin: 0; }

.ptv-ad-slot { display: block; }
.ptv-ad-slot--top { margin: 0 0 16px; }
.ptv-ad-slot .yandex-ad { margin: 0; }

/* articles: баннер-карточка занимает grid-ячейку */
.articles-card--ad {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  cursor: default;
  width: 100%;
  aspect-ratio: 2 / 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: none;
}
.articles-card--ad:hover {
  transform: none;
  box-shadow: none;
}
.articles-card--ad .yandex-ad {
  width: 100%;
  margin: 0;
  align-items: stretch;
}
.articles-card--ad .yandex-ad__slot {
  width: 100%;
  min-height: 0;
  max-height: none;
}
.articles-ad-slot--detail {
  display: block;
  margin: 16px 0 20px;
}
.articles-ad-slot--detail .yandex-ad { margin: 0; }
.yandex-ad__slot--placeholder {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed color-mix(in srgb, var(--color-primary) 70%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
  color: var(--color-on-surface);
  padding: 16px;
  text-align: center;
}
.yandex-ad__placeholder-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.yandex-ad__placeholder-sub {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}

/* css/components/ad-off-badge.css */
/* === Бейдж «Убрать всю рекламу» === */
/* Порт adOff() из Flutter lib/screens/ads.dart — пилюля над рекламным баннером
   с зелёным анимированным градиентом. Сидит над .yandex-ad внутри
   #global-bottom-ad (см. components/tool-slots.css). */
.adoff-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  margin: 0 0 6px 0;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #CFFFD0;
  background: linear-gradient(135deg, #58D49C 0%, #4CAF50 50%, #58D49C 100%);
  background-size: 200% 200%;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.26);
  animation: adoff-badge-shift 2.4s linear infinite;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.adoff-badge:hover  { transform: scale(1.04); }
.adoff-badge:active { transform: scale(0.96); }
.adoff-badge:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.adoff-badge__icon { display: inline-block; }

[data-theme="dark"] .adoff-badge {
  color: #1C511D;
  background: linear-gradient(135deg, #87F9C6 0%, #4CAF50 50%, #87F9C6 100%);
  background-size: 200% 200%;
  box-shadow: 0 3px 12px rgba(255, 255, 255, 0.12);
}

@keyframes adoff-badge-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .adoff-badge { animation: none; }
}

/* === Блок преимуществ подписки в модалке «Требуется авторизация» === */
.adoff-benefits {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 16px;
  background: color-mix(in srgb, #4CAF50 12%, var(--color-surface));
  border: 1px solid color-mix(in srgb, #4CAF50 28%, transparent);
}
.adoff-benefits__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 6px;
}
.adoff-benefits__list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface);
}
.adoff-benefits__list li {
  margin: 0 0 2px;
}
.adoff-benefits__list li::marker {
  color: #4CAF50;
}
.adoff-benefits__price {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, #4CAF50 30%, transparent);
  font-size: 13px;
  color: var(--color-on-surface-secondary);
}
.adoff-benefits__price b {
  color: var(--color-on-surface);
  font-weight: 700;
}

/* css/components/profile.css */
/* === Profile: header button badge === */
.btn-icon {
  position: relative;
}
.btn-icon__dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-on-surface-secondary);
  border: 2px solid var(--color-surface);
  box-sizing: content-box;
  pointer-events: none;
  transition: background 0.2s ease;
}
/* Статусы индикатора (см. profileBadgeStatus в tools/profile/render.js) */
.btn-icon__dot[data-status="green"] { background: #4CAF50; }
.btn-icon__dot[data-status="gray"]  { background: #9E9E9E; }
.btn-icon__dot[data-status="red"]   { background: #F44336; }

.btn-icon__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-on-surface);
  text-transform: uppercase;
  overflow: hidden;
  user-select: none;
  padding-top: 2px;
}
.btn-icon__avatar--letter {
  background: var(--color-primary);
  color: #fff;
}
[data-theme="dark"] .btn-icon__avatar--letter {
  color: #000;
}

/* css/components/info-cards.css */
/* === Header text buttons (Сообщество / Скачать приложение) === */
.btn-text {
  height: 32px;
  padding: 0 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface);
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-text:hover {
  background: var(--color-hover);
}
.btn-text svg {
  flex-shrink: 0;
  color: var(--color-primary);
}


/* === Info cards (в модалке Сообщество / Скачать) === */
.info-card {
  padding: 4px;
  margin-bottom: 6px;
  border-radius: 14px;
}
.info-card:last-child { margin-bottom: 0; }
.info-card--blue {
  background: color-mix(in srgb, #2196F3 18%, transparent);
}
.info-card--blueGrey {
  background: color-mix(in srgb, #607D8B 18%, transparent);
}
.info-card--green {
  background: color-mix(in srgb, #4CAF50 18%, transparent);
}
.info-card--plain {
  background: transparent;
  padding: 0;
}
.info-card--plain .info-card__link {
  background: transparent;
  color: var(--color-on-surface);
  border: 1px solid var(--color-border);
}
.info-card--plain .info-card__link:hover {
  background: var(--color-hover);
  filter: none;
}
.info-card--plain .info-card__link svg {
  color: var(--color-on-surface-secondary);
}
.info-card--plain .info-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: contain;
  border: none;
  box-shadow: none;
}
.info-card--plain .info-card__head {
  padding-bottom: 24px;
}
.info-card--plain .info-card__links {
  gap: 10px;
}

.info-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 8px;
}
.info-card__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.info-card__text {
  min-width: 0;
  flex: 1;
}
.info-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2px;
}
.info-card__desc {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-on-surface);
}

.info-card__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.info-card__link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  font-family: var(--font-family);
  transition: filter 0.15s;
}
.info-card__link:hover { filter: brightness(1.1); }
.info-card__link-badge {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.info-card__link-title {
  font-size: 14px;
  font-weight: 700;
}
.info-card__link-sub {
  font-size: 13px;
  font-weight: 300;
  margin-left: 4px;
  flex: 1;
  opacity: 0.85;
}
.info-card__link svg {
  opacity: 0.9;
}

.info-card__link--telegram {
  background: linear-gradient(135deg, rgba(33,150,243,0.3), rgb(80,159,213));
}
.info-card__link--max {
  background: linear-gradient(135deg, rgba(146,75,212,0.3), rgb(44,70,240));
}
.info-card__link--apple {
  background: linear-gradient(135deg, #434343, #000);
}
.info-card__link--google {
  background: linear-gradient(135deg, #34A853, #0F9D58);
}
.info-card__link--rustore {
  background: linear-gradient(135deg, #4B6BFF, #1F35B0);
}
.info-card__link--huawei {
  background: linear-gradient(135deg, #E60012, #8B0000);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Инструмент «Пенообразователь»
   ═══════════════════════════════════════════════════════════════════════════ */
.main-content:has(.foam-page) { padding-top: 0; }
.foam-page {
  display: flex;
  flex-direction: column;
}
.foam-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0;
  container-type: inline-size;
}

/* — Сводная секция — */
.foam-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 15px;
  overflow: hidden;
}
.foam-summary__row + .foam-summary__row {
  border-top: 1px solid var(--color-border);
}

/* При достаточной ширине: сводка слева (Всего/Склад/Техника),
   квартальная ведомость справа — во всю высоту левой колонки */
@container (min-width: 900px) {
  .foam-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
  }
  .foam-summary__row:nth-child(-n+3) {
    grid-column: 1;
  }
  .foam-summary__row:nth-child(4) {
    grid-column: 2;
    grid-row: 1 / span 3;
    border-left: 1px solid var(--color-border);
  }
  .foam-summary__row + .foam-summary__row {
    border-top: none;
  }
  .foam-summary__row:nth-child(2),
  .foam-summary__row:nth-child(3) {
    border-top: 1px solid var(--color-border);
  }
}

/* — Сетка карточек (склад + техника) — */
.foam-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 14px;
}
.foam-summary__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 48px;
}
.foam-summary__header:hover {
  background: var(--color-hover);
}
.foam-summary__header[data-empty="1"] {
  cursor: default;
}
.foam-summary__header[data-empty="1"]:hover {
  background: transparent;
}
.foam-summary__icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
}
.foam-summary__label {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.foam-summary__spacer { flex: 1; }
.foam-summary__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-on-surface-secondary);
}
.foam-summary__chevron {
  display: inline-flex;
  align-items: center;
  color: var(--color-on-surface-secondary);
  transition: transform 0.2s;
}
.foam-summary__row--open .foam-summary__chevron {
  transform: rotate(180deg);
}
.foam-summary__details {
  padding: 4px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.foam-summary__detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-on-surface-secondary);
}
.foam-summary__detail-name { font-weight: 500; color: var(--color-on-surface); }
.foam-summary__divider {
  flex: 1;
  height: 1px;
  border-bottom: 1px dotted var(--color-border);
  margin: 0 4px;
  align-self: center;
}

/* — Квартальная ведомость — */
.foam-quarterly {
  gap: 14px;
}
.foam-quarterly__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.foam-quarterly__header {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.foam-quarterly__sublabel {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.foam-quarterly__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-on-surface);
  padding: 2px 0;
}
.foam-quarterly__row--total {
  font-weight: 700;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
  margin-top: 2px;
}
.foam-quarterly__divider {
  flex: 1;
  height: 1px;
  border-bottom: 1px dotted var(--color-border);
  align-self: center;
  margin: 0 4px;
}
.foam-quarterly__empty {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  font-style: italic;
  padding: 2px 0;
}
.foam-quarterly__divider-h {
  height: 1px;
  background: var(--color-border);
  margin: 8px 0;
}

/* — Карточки склада и техники — */
.foam-card {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 15px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.foam-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.foam-card__icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
}
.foam-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-on-surface);
  flex: 1;
}
.foam-card__empty {
  font-size: 14px;
  color: var(--color-on-surface-secondary);
  font-style: italic;
}
.foam-card__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.foam-card__line {
  font-size: 14px;
  color: var(--color-on-surface);
}
.foam-vehicle-card--underfilled {
  background: var(--color-bg);
}
.foam-vehicle-card__capacity {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
}
.foam-vehicle-card__summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.foam-vehicle-card__summary--empty {
  color: var(--color-on-surface-secondary);
  font-style: italic;
  font-weight: 500;
}
.foam-vehicle-card__summary--error {
  color: #F44336;
}
[data-theme="dark"] .foam-vehicle-card__summary--error {
  color: #FF6B6B;
}
.foam-vehicle-card__details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 2px;
}
.foam-vehicle-card__detail {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
}
.foam-vehicle-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.foam-add-vehicle {
  width: 100%;
  justify-content: center;
  padding: 14px;
  border: 1px dashed var(--color-primary);
  border-radius: 15px;
  color: var(--color-primary);
}

/* — Формы в модалках — */
.foam-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.foam-input,
.foam-select {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.foam-input:focus,
.foam-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.foam-input--error {
  border-color: #F44336;
}
.foam-input--error:focus {
  box-shadow: 0 0 0 2px rgba(244,67,54,0.25);
}
.foam-input--date {
  width: auto;
  min-width: 140px;
  color-scheme: light;
}
[data-theme="dark"] .foam-input--date { color-scheme: dark; }
.foam-hint {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}
.foam-hint--right { text-align: right; }
.foam-error {
  font-size: 12px;
  color: #F44336;
}
[data-theme="dark"] .foam-error { color: #FF6B6B; }
.foam-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-on-surface);
  cursor: pointer;
  margin-top: 4px;
}

/* — Редактор списка склада — */
.foam-edit-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foam-edit-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.foam-edit-row__top {
  display: flex;
  gap: 8px;
  align-items: center;
}
.foam-edit-row__top .foam-select { flex: 1; }
.foam-edit-row__bottom {
  display: flex;
  gap: 8px;
  align-items: center;
}
.foam-edit-row__bottom .foam-input { flex: 1; }
.foam-edit-row__kg {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  min-width: 90px;
  text-align: right;
}
.foam-edit-add {
  align-self: flex-start;
}
.foam-edit-charakter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

/* — История — */
.foam-history-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.foam-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  background: var(--color-surface);
  color: var(--color-on-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.foam-filter-chip:hover { background: var(--color-hover); }
.foam-filter-chip--active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
[data-theme="dark"] .foam-filter-chip--active { color: #000; }
.foam-history-dates {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 13px;
  color: var(--color-on-surface-secondary);
}
.foam-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.foam-history__empty {
  text-align: center;
  padding: 24px 0;
  font-size: 14px;
  color: var(--color-on-surface-secondary);
  font-style: italic;
}
.foam-history-item {
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.foam-history-item--fill { border-left-color: #4CAF50; }
.foam-history-item--use { border-left-color: #F44336; }
.foam-history-item--other { border-left-color: var(--color-on-surface-secondary); }
.foam-history-item__head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.foam-history-item__icon {
  display: inline-flex;
  color: var(--color-on-surface-secondary);
}
.foam-history-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
  flex: 1;
}
.foam-history-item__delete {
  color: var(--color-on-surface-secondary);
}
.foam-history-item__details {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  line-height: 1.4;
  white-space: normal;
}
.foam-history-item__date {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  align-self: flex-end;
  opacity: 0.75;
}

/* — Марки / Приборы — */
/* Модалки со списками управления требуют фиксированной высоты:
   без неё flex: 1 1 0 каскад коллапсирует в ноль, потому что
   .tool-modal по умолчанию растёт по контенту. */
.foam-modal:has(.foam-manage-split) {
  height: min(90vh, 720px);
}
/* .tool-modal__body по умолчанию display: block, поэтому flex: 1 у дочернего
   .foam-manage-split не действовал и список коллапсировал в 0px. */
.foam-modal:has(.foam-manage-split) .tool-modal__body {
  display: flex;
  flex-direction: column;
}
.foam-manage-split {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.foam-manage-section {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.foam-manage-section .foam-label {
  margin-top: 0;
}
.foam-manage-add-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.foam-manage-list {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.foam-manage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 14px;
  flex-shrink: 0;
}
.foam-manage-row + .foam-manage-row {
  border-top: 1px solid var(--color-border);
}
.foam-manage-row__name {
  font-weight: 600;
  color: var(--color-on-surface);
  flex: 1;
}
.foam-manage-row__value {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
}
.foam-manage-add {
  align-self: flex-start;
  margin-top: 4px;
}
.foam-row-remove {
  color: var(--color-on-surface-secondary);
}
.foam-row-remove:hover {
  color: #F44336;
}

/* — Confirm / footer утилиты — */
.foam-confirm {
  font-size: 14px;
  color: var(--color-on-surface);
  line-height: 1.4;
}
.foam-btn--danger {
  color: #F44336;
}
.btn--primary.foam-btn--danger {
  background: #F44336;
  color: #fff;
}
[data-theme="dark"] .btn--primary.foam-btn--danger { color: #fff; }
.foam-footer-left,
.foam-footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.foam-footer-right { margin-left: auto; }

/* — Кнопка «Заправка» на карточке техники — */
.foam-btn--fill {
  background: color-mix(in srgb, #4CAF50 15%, transparent);
  color: #2E7D32;
  border-color: color-mix(in srgb, #4CAF50 40%, transparent);
}
.foam-btn--fill:hover:not([disabled]) {
  background: color-mix(in srgb, #4CAF50 25%, transparent);
  border-color: #4CAF50;
  color: #1B5E20;
}
[data-theme="dark"] .foam-btn--fill {
  background: color-mix(in srgb, #6FCF73 18%, transparent);
  color: #9CE2A0;
  border-color: color-mix(in srgb, #6FCF73 45%, transparent);
}
[data-theme="dark"] .foam-btn--fill:hover:not([disabled]) {
  background: color-mix(in srgb, #6FCF73 28%, transparent);
  border-color: #6FCF73;
  color: #C8F0CA;
}

/* === Попап «Поддержка» === */
.support-intro {
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-on-surface);
  padding: 4px 6px 12px;
}
.support-intro p {
  margin: 0 0 8px;
}
.support-intro p:last-child {
  margin-bottom: 0;
}

.support-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.support-section:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}
.support-section__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.support-copy-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.support-copy-row:hover {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-color: var(--color-primary);
}
.support-copy-row > svg {
  flex-shrink: 0;
  color: var(--color-primary);
}
.support-copy-row__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.support-copy-row__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-on-surface-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.support-copy-row__value {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
  letter-spacing: 0.02em;
}
.support-copy-row__hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.support-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
}
.support-share-btn:hover {
  filter: brightness(1.08);
}
[data-theme="dark"] .support-share-btn {
  color: #000;
}
.support-share-hint {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  text-align: center;
  margin-top: 6px;
  line-height: 1.4;
}

.support-link-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(135deg, rgba(33,150,243,0.3), rgb(80,159,213));
  transition: filter 0.15s;
}
.support-link-row:hover {
  filter: brightness(1.1);
}
.support-link-row__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  padding: 2px;
}
.support-link-row__text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.support-link-row__title {
  font-size: 14px;
  font-weight: 700;
}
.support-link-row__sub {
  font-size: 12px;
  opacity: 0.85;
}

.support-stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 0 4px;
  color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  text-decoration: none;
  transition: color 0.15s, transform 0.15s;
}
.support-stars:hover {
  color: #F5A623;
  transform: scale(1.03);
}

.support-toast {
  position: fixed;
  left: 50%;
  bottom: 40px;
  transform: translate(-50%, 20px);
  padding: 10px 18px;
  background: var(--color-on-surface);
  color: var(--color-surface);
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 2000;
}
.support-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* === Форма обратной связи === */
.support-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.support-form__intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface-secondary);
}

.support-form__attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 14px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: 100px;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.support-form__attach:hover {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-color: var(--color-primary);
}
.support-form__attach--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.support-form__attach--disabled:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.support-form__file-input {
  display: none;
}

.support-form__files {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.support-form__files:empty {
  display: none;
}
.support-form__file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 12px;
  color: var(--color-on-surface);
}
.support-form__file > svg {
  flex-shrink: 0;
  color: var(--color-on-surface-secondary);
}
.support-form__file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-form__file-size {
  color: var(--color-on-surface-secondary);
  font-size: 11px;
  flex-shrink: 0;
}
.support-form__file-remove {
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-on-surface-secondary);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.support-form__file-remove:hover {
  background: var(--color-hover);
  color: #D32F2F;
}

.support-form__text {
  width: 100%;
  min-height: 110px;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.support-form__text:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.support-form__text:disabled {
  opacity: 0.6;
  cursor: default;
}

.support-form__error {
  font-size: 13px;
  color: #D32F2F;
  background: color-mix(in srgb, #D32F2F 10%, transparent);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  line-height: 1.4;
}
[data-theme="dark"] .support-form__error {
  color: #F28B82;
}

.support-form__submit {
  height: 42px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}
.support-form__submit:hover:not(:disabled) {
  filter: brightness(1.05);
}
.support-form__submit:disabled {
  opacity: 0.6;
  cursor: default;
}
[data-theme="dark"] .support-form__submit {
  color: #000;
}

/* === Экран «сообщение отправлено» === */
.support-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 8px 8px;
  gap: 14px;
}
.support-success__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: color-mix(in srgb, #4CAF50 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2E7D32;
}
[data-theme="dark"] .support-success__icon {
  color: #81C784;
}
.support-success__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-on-surface);
}
.support-success__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-surface-secondary);
  max-width: 340px;
}

/* css/components/checkbox.css */
/* === Глобальный чекбокс в стиле iOS-тумблера ===
   Все <input type="checkbox"> на сайте выглядят как переключатель
   из инструмента "Норма часов" (.norma-toggle). */

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-on-surface-secondary) 30%, transparent);
  cursor: pointer;
  vertical-align: middle;
  transition: background 0.2s;
}

input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}

input[type="checkbox"]:checked {
  background: #4CAF50;
}

input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}

input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* css/components/legal-modal.css */
/* === Legal info modal (правовая информация из аппбара) === */
.legal-modal {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 2px;
}

.legal-modal__section-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.legal-modal__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legal-modal__link {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-on-surface);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.legal-modal__link:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}

.legal-modal__owner {
  font-size: 12px;
  color: var(--color-on-surface);
}

.legal-modal__owner-sub {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  margin-top: 2px;
}

.legal-modal__copy {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  opacity: 0.6;
  text-align: center;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}

/* css/components/cookie-banner.css */
/* === Cookie-баннер === */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  line-height: 1.5;
  max-width: 720px;
  margin: 0 auto;
  animation: cookieBannerIn 0.25s ease-out;
}

@keyframes cookieBannerIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cookie-banner--hiding {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s, transform 0.2s;
}

.cookie-banner__text {
  flex: 1;
  min-width: 0;
}

.cookie-banner__text a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-banner__text a:hover {
  text-decoration: none;
}

.cookie-banner__accept {
  flex-shrink: 0;
  padding: 8px 20px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.cookie-banner__accept:hover {
  opacity: 0.9;
}

.cookie-banner__accept:active {
  transform: scale(0.97);
}

[data-theme="dark"] .cookie-banner__accept {
  color: #000;
}

/* css/components/header-search.css */
/* === Header Search === */
/* Инпут поиска в шапке раскрывается слева от кнопки-лупы; панель
   результатов висит под инпутом поверх центрального контента. */

.app-header__search {
  position: relative;
  display: flex;
  align-items: center;
  --search-input-w: 320px;
  --search-btn-w: 32px;
  --search-gap: 6px;
}

.app-header__search-input-wrap {
  width: 0;
  overflow: hidden;
  transition: width 0.22s ease, margin-right 0.22s ease;
  margin-right: 0;
}

.app-header__search--open .app-header__search-input-wrap {
  width: var(--search-input-w);
  margin-right: var(--search-gap);
}

.app-header__search-input {
  width: var(--search-input-w);
  height: 32px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 30%, transparent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-family);
  outline: none;
  background: color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  color: var(--color-on-surface);
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.app-header__search-input:focus { border-color: var(--color-primary); }

.app-header__search-results {
  position: absolute;
  top: calc(100% + 6px);
  right: calc(var(--search-btn-w) + var(--search-gap));
  width: var(--search-input-w);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  display: none;
  z-index: 12;
}
.app-header__search--open.app-header__search--has-results .app-header__search-results {
  display: block;
}

/* При открытии поиска текстовые кнопки слева (Скачать / Сообщество /
   Правовая) плавно сжимаются в иконки: скрывается только подпись, сам
   svg остаётся. */
.app-header__actions .btn-text {
  transition: padding 0.22s ease, background 0.15s;
}

.app-header__actions .btn-text span {
  display: inline-block;
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.22s ease, opacity 0.22s ease, margin-left 0.22s ease;
}

.app-header__actions:has(.app-header__search--open) .btn-text {
  padding: 0 8px;
}

.app-header__actions:has(.app-header__search--open) .btn-text span {
  max-width: 0;
  opacity: 0;
  margin-left: -6px;
}

.app-header__search-group + .app-header__search-group {
  border-top: 1px solid var(--color-border);
}

.app-header__search-group__title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-on-surface-secondary);
  letter-spacing: 0.5px;
  padding: 8px 12px 4px;
}

.app-header__search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.app-header__search-item:hover,
.app-header__search-item--focused {
  background: var(--color-hover);
}

.app-header__search-item__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-on-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-header__search-item__icon svg {
  width: 100%;
  height: 100%;
}

.app-header__search-item__info {
  flex: 1;
  min-width: 0;
}

.app-header__search-item__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-header__search-item__subtitle {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  line-height: 1.3;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-header__search-item mark {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 700;
  border-radius: 2px;
  padding: 0 2px;
}

.app-header__search-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  text-align: center;
}

/* css/sidebar/tools-list.css */
/* === Tools List (Left Sidebar) === */
.tools-list {
  list-style: none;
  padding: 4px 0;
}

.tool-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  min-height: 51px;
  box-sizing: border-box;
  cursor: pointer;
  border-bottom: 1px solid rgba(128,128,128,0.08);
  transition: background 0.15s;
}
.tool-item:hover {
  background: var(--color-hover);
}

.tool-item--active,
.tool-item--active:hover {
  background: var(--color-bg);
  border-left: 3px solid var(--color-primary);
}

/* css/sidebar/docs-list.css */
/* === Documents List (Right Sidebar) === */
.docs-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-family);
  outline: none;
  background: var(--color-surface);
  color: var(--color-on-surface);
  transition: border-color 0.2s;
  margin: 12px 0 8px;
}
.docs-search:focus {
  border-color: var(--color-primary);
}

.docs-search-wrap {
  padding: 0 16px 8px;
  position: sticky;
  top: 48px;
  background: var(--color-surface);
  z-index: 4;
}
.docs-search-wrap .search-count {
  display: block;
  margin-top: 4px;
  padding: 0 2px;
}
.docs-search-wrap .search-count:empty {
  display: none;
}

.docs-list {
  list-style: none;
  padding: 0 0 16px;
}

.doc-item {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(128,128,128,0.08);
  cursor: pointer;
  transition: background 0.15s;
}
.doc-item:hover {
  background: var(--color-hover);
}

.doc-item__short {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-item__short-collapsed {
  display: none;
}

.doc-item__full {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  line-height: 1.4;
  margin-top: 6px;
  display: none;
}

.doc-item--expanded .doc-item__full {
  display: block;
}

.doc-item--active,
.doc-item--active:hover {
  background: var(--color-bg);
  box-shadow: inset -3px 0 0 var(--color-primary);
}
.doc-item--active .doc-item__short {
  color: var(--color-primary);
  font-weight: 700;
}

.doc-item__open-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s;
}
.doc-item__open-btn:hover {
  opacity: 0.9;
}
[data-theme="dark"] .doc-item__open-btn {
  color: #000;
}


/* === Doc Sections (Right Sidebar — Новые документы / Обязанности) === */
.doc-sections {
  list-style: none;
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border);
}

.doc-section-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  min-height: 51px;
  box-sizing: border-box;
  cursor: pointer;
  border-bottom: 1px solid rgba(128,128,128,0.08);
  transition: background 0.15s;
}
.doc-section-item:last-child {
  border-bottom: none;
}
.doc-section-item:hover {
  background: var(--color-hover);
}

.doc-section-item--active,
.doc-section-item--active:hover {
  background: var(--color-bg);
  box-shadow: inset -3px 0 0 var(--color-primary);
}

.doc-section-item__icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-on-surface-secondary);
}
.doc-section-item__icon svg {
  width: 100%;
  height: 100%;
}
.doc-section-item--active .doc-section-item__icon {
  color: var(--color-primary);
}

.doc-section-item__info {
  flex: 1;
  min-width: 0;
}

.doc-section-item__title {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-section-item__subtitle {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-section-item--active .doc-section-item__title {
  color: var(--color-primary);
}

/* css/tools/calendar.css */
/* === Calendar Page layout === */
.calendar-page {
  container-type: inline-size;
  width: 100%;
}
.calendar-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.calendar-layout__calendar,
.calendar-layout__schedule,
.calendar-layout__blocks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
/* Убираем собственные margin'ы — отступы даёт gap родителя */
.calendar-layout .calendar-view-tabs {
  margin-bottom: 0;
}
.calendar-layout__calendar > .calendar-block,
.calendar-layout__schedule > .calendar-block,
.calendar-layout__blocks > .calendar-block {
  margin-bottom: 0;
}
.calendar-layout__ad .yandex-ad {
  margin: 0;
}

/* При достаточной ширине: первая строка — календарь 70% + расписание 30%,
   под ними — рекламный блок на всю ширину, далее блоки в 2 колонки.
   Порог ~900px — по аналогии с fizo (minmax(420px, 1fr)): 2 колонки по ~440px. */
@container (min-width: 900px) {
  .calendar-layout {
    display: grid;
    grid-template-columns: 70fr 30fr;
    grid-template-areas:
      "cal sched"
      "ad  ad"
      "blocks blocks";
    column-gap: 16px;
    row-gap: 16px;
  }
  .calendar-layout__calendar { grid-area: cal; }
  .calendar-layout__schedule {
    grid-area: sched;
    align-self: stretch;
    display: block;
    position: relative;
    min-height: 0;
    overflow: hidden;
  }
  .calendar-layout__ad { grid-area: ad; }
  .calendar-layout__blocks { grid-area: blocks; }

  /* Блоки под: grid 2×2 + news на всю ширину снизу. align-items: start — при
     раскрытии блока соседний в той же строке не растягивается по высоте. */
  .calendar-layout__blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 16px;
    align-items: start;
  }
  .calendar-layout__blocks > [data-block-id="day-info"]    { grid-column: 1; grid-row: 1; }
  .calendar-layout__blocks > [data-block-id="shift-count"] { grid-column: 2; grid-row: 1; }
  .calendar-layout__blocks > [data-block-id="weather"]     { grid-column: 1; grid-row: 2; }
  .calendar-layout__blocks > [data-block-id="holidays"]    { grid-column: 2; grid-row: 2; }
  .calendar-layout__blocks > [data-block-id="news"]        { grid-column: 1 / span 2; grid-row: 3; }

  /* Расписание: принудительно развёрнуто, высота = высота календаря, скролл внутри.
     position: absolute вынимает .calendar-block из потока — schedule-slot не раздувается
     content'ом расписания, его высота диктуется только календарём через align-self: stretch. */
  .calendar-layout__schedule > .calendar-block {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    min-height: 0;
    overflow: hidden;
  }
  /* Канонический flex-паттерн для вложенного скролла: body — flex-column
     с bounded height, body-inner — flex: 1 с min-height: 0 и overflow-y: auto.
     display: flex !important отменяет базовый grid (нужен только для анимации
     свёртывания, а в 2-кол расписание всегда развёрнуто).
     overscroll-behavior: contain не даёт скроллу «утекать» в .main-content. */
  .calendar-layout__schedule .calendar-block__body {
    display: flex !important;
    flex-direction: column;
    margin-top: 12px;
    flex: 1 1 auto;
    min-height: 0;
  }
  .calendar-layout__schedule .calendar-block__body > .calendar-block__body-inner {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: var(--global-ad-safe-bottom);
    scroll-padding-bottom: var(--global-ad-safe-bottom);
  }
  .calendar-layout__schedule .calendar-block__toggle {
    display: none;
  }
  .calendar-layout__schedule .calendar-block__header {
    cursor: default;
  }
  .calendar-layout__schedule .schedule-widget {
    display: none !important;
  }
  .calendar-layout__schedule #schedule-header-action {
    display: inline-flex !important;
  }
  /* Возвращаем заголовок «Распорядок дня» — общее правило скрывает его,
     когда toggle имеет класс --collapsed (остаток класса при переходе 2→1→2 кол) */
  .calendar-layout__schedule .calendar-block[data-block-id="schedule"] .calendar-block__header .calendar-block__title-text {
    display: block !important;
    flex: 1 !important;
    max-width: none !important;
    font-size: 15px !important;
  }

  /* Schedule \u0432 2-\u043A\u043E\u043B \u2014 \u0441\u043D\u0438\u043C\u0430\u0435\u043C padding-bottom \u0441 \u043A\u0430\u0440\u0442\u043E\u0447\u043A\u0438, \u0447\u0442\u043E\u0431\u044B \u0441\u043A\u0440\u043E\u043B\u043B-\u043A\u043E\u043D\u0442\u0435\u0439\u043D\u0435\u0440
     \u0443\u043F\u0438\u0440\u0430\u043B\u0441\u044F \u0432 \u043D\u0438\u0436\u043D\u0438\u0439 \u043A\u0440\u0430\u0439 \u0431\u043B\u043E\u043A\u0430. \u041E\u0442\u0441\u0442\u0443\u043F \u043E\u0442\u0434\u0430\u0451\u043C \u0441\u043F\u0438\u0441\u043A\u0443 \u2014 \u043E\u043D \u0432\u0438\u0434\u0435\u043D \u043F\u0440\u0438 \u0434\u043E\u0441\u043A\u0440\u043E\u043B\u043B\u0435 \u0434\u043E \u043A\u043E\u043D\u0446\u0430.
     \u0412 1-\u043A\u043E\u043B \u044D\u0442\u043E \u043F\u0440\u0430\u0432\u0438\u043B\u043E \u043D\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u2014 \u0431\u043B\u043E\u043A \u0441\u043E\u0445\u0440\u0430\u043D\u044F\u0435\u0442 \u0441\u0438\u043C\u043C\u0435\u0442\u0440\u0438\u0447\u043D\u044B\u0439 padding \u0432\u0435\u0440\u0445/\u043D\u0438\u0437 \u0432 \u0441\u0432\u0451\u0440\u043D\u0443\u0442\u043E\u043C. */
  .calendar-layout__schedule > .calendar-block {
    padding-bottom: 0;
  }
  .calendar-layout__schedule .schedule-list {
    padding-bottom: 16px;
  }
}

/* === Calendar View Tabs === */
.calendar-view-tabs {
  margin-bottom: 12px;
}
.calendar-view-tabs .tool-tab {
  font-size: 13px;
  padding: 8px 12px;
}


/* === Calendar Block (Card) === */
.calendar-block {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 16px;
}

.calendar-block__title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--color-on-surface);
}


/* === Collapsible Block Header === */
.calendar-block__header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.calendar-block__header--static {
  cursor: default;
}

/* News \u2014 \u0431\u0435\u0437 \u0444\u043E\u043D\u0430 \u0438 \u0442\u0435\u043D\u0438, \u0431\u0435\u0437 \u0431\u043E\u043A\u043E\u0432\u044B\u0445 \u043E\u0442\u0441\u0442\u0443\u043F\u043E\u0432: \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0438 \u043A\u0430\u0440\u0442\u043E\u0447\u043A\u0438 \u0432\u044B\u0440\u0430\u0432\u043D\u0435\u043D\u044B \u043F\u043E
   \u043B\u0435\u0432\u043E\u043C\u0443 \u043A\u0440\u0430\u044E \u0440\u043E\u0434\u0438\u0442\u0435\u043B\u044C\u0441\u043A\u043E\u0439 \u0441\u0435\u0442\u043A\u0438. */
.calendar-block[data-block-id="news"] {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  box-shadow: none;
}
.calendar-block[data-block-id="news"] .calendar-block__header {
  padding-left: 0;
  padding-right: 0;
}

/* \u0417\u0430\u0443\u0436\u0430\u0435\u043C \u0431\u043E\u043A\u043E\u0432\u044B\u0435 \u043E\u0442\u0441\u0442\u0443\u043F\u044B \u0431\u043B\u043E\u043A\u0430 \u00AB\u0420\u0430\u0441\u043F\u043E\u0440\u044F\u0434\u043E\u043A\u00BB: \u0431\u0430\u0437\u043E\u0432\u043E \u0431\u044B\u043B\u043E 16/16, \u0441\u0442\u0430\u043B\u043E 11/6. */
.calendar-block[data-block-id="schedule"] {
  padding-left: 11px;
  padding-right: 6px;
}
.calendar-block--collapsible .calendar-block__header {
  margin-bottom: 0;
}
.calendar-block--collapsible .calendar-block__body--expanded {
  margin-top: 12px;
}

/* Плавная анимация раскрытия calendar-block */
.calendar-block__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease, margin-top 0.3s ease;
  margin-top: 0;
}
.calendar-block__body > .calendar-block__body-inner {
  min-height: 0;
  overflow: hidden;
}
.calendar-block__body--expanded {
  grid-template-rows: 1fr;
  margin-top: 12px;
}

.calendar-block__title-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-on-surface);
  flex: 1;
}

.calendar-block__toggle {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--color-on-surface-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
  border-radius: 4px;
}
.calendar-block__toggle svg {
  width: 16px;
  height: 16px;
}

.calendar-block__toggle:hover {
  background: var(--color-hover);
}
.calendar-block__toggle--collapsed {
  transform: rotate(-90deg);
}


/* === Calendar Navigation === */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.calendar-nav__month {
  font-size: 18px;
  font-weight: 700;
  text-transform: capitalize;
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.calendar-nav__month:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}

.calendar-nav__btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface);
  transition: background 0.15s;
}
.calendar-nav__btn svg {
  width: 20px;
  height: 20px;
}

.calendar-nav__btn:hover {
  background: var(--color-hover);
}

.calendar-nav__today {
  border: none;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  font-family: var(--font-family);
}
.calendar-nav__today:hover {
  background: var(--color-active);
}


/* === Calendar Grid === */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.calendar-grid__header {
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  padding: 8px 0;
  text-transform: uppercase;
}

.calendar-grid__header--weekend {
  color: var(--color-team-4);
}


/* === Calendar Days Grid === */
.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-radius: var(--radius);
  overflow: hidden;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  transition: filter 0.15s;
}
.calendar-day:hover {
  filter: brightness(1.1);
  font-size: 16px;
  font-weight: 700;
}

.calendar-day--mini {
  font-size: 11px;
}
.calendar-day--mini:hover {
  font-size: 13px;
}

.calendar-day--other-month {
  color: var(--color-on-surface-secondary) !important;
  opacity: 0.2;
}

.calendar-day--today {
  font-weight: 900;
  z-index: 2;
  border-radius: 10px;
}

/* Выделенный день — рамка как в Flutter */
.calendar-day--selected {
  z-index: 3;
  border-radius: 9px;
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.calendar-day__today-label {
  position: absolute;
  bottom: 2px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--color-on-surface-secondary);
  pointer-events: none;
}

/* Нерабочий день (производственный календарь) — фон прозрачнее, задаётся в JS */

.calendar-day--holiday .calendar-day__dot {
  position: absolute;
  bottom: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-team-4);
}
.calendar-day--mini .calendar-day__dot {
  bottom: 2px;
  width: 3px;
  height: 3px;
}

/* Цифра дня — поверх фоновой иконки заметки */
.calendar-day__num {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Метка заметки: крупная фоновая иконка по центру ячейки (Flutter: app_registration_sharp, primary 0.2) */
.calendar-day__note-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.calendar-day__note-bg svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Метка напоминания: колокольчик в левом верхнем углу (Flutter: notifications_none 13px, onSurface 0.8) */
.calendar-day__reminder,
.calendar-day__ptv {
  position: absolute;
  top: 4px;
  width: 13px;
  height: 13px;
  color: var(--color-on-surface);
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
}
.calendar-day__reminder { left: 4px; }
.calendar-day__ptv { right: 4px; }
.calendar-day__reminder svg,
.calendar-day__ptv svg {
  width: 100%;
  height: 100%;
  display: block;
}


/* === Multi-month Calendar === */
.calendar-multi {
  display: grid;
  gap: 12px;
}

.calendar-multi--3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.calendar-multi--6 {
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.calendar-multi--12 {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.calendar-mini {
  background: rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
  padding: 6px;
}
[data-theme="dark"] .calendar-mini {
  background: rgba(0,0,0,0.15);
}

.calendar-mini__header {
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 4px;
  color: var(--color-on-surface);
}

.calendar-multi--12 .calendar-mini {
  padding: 4px;
}

.calendar-multi--12 .calendar-mini__header {
  font-size: 11px;
  margin-bottom: 2px;
}

.calendar-mini .calendar-days-grid {
  border-radius: var(--radius-sm);
}


/* === Team Buttons === */
.team-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.team-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-family);
  transition: opacity 0.2s, filter 0.2s;
  background-color: color-mix(in srgb, var(--team-color) 18%, transparent);
  color: var(--team-color);
}

.team-btn--inactive {
  opacity: 0.3;
  filter: grayscale(0.8);
}

.team-settings-btn {
  border: none;
  background: color-mix(in srgb, var(--color-on-surface-secondary) 12%, transparent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-family);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  color: var(--color-on-surface-secondary);
  transition: background 0.15s, color 0.15s;
  margin-left: auto;
}
.team-settings-btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.team-settings-btn:hover {
  background: var(--color-hover);
  color: var(--color-on-surface);
}


/* === Shift Count === */
.shift-count {
  display: block;
}

.shift-count-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.shift-count-table thead th {
  text-align: left;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  padding: 6px 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
  text-transform: none;
}
.shift-count-table thead th:nth-child(2),
.shift-count-table thead th:nth-child(3),
.shift-count-table tbody td:nth-child(2),
.shift-count-table tbody td:nth-child(3) {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}
.shift-count-table tbody td {
  padding: 8px;
  border-bottom: 1px solid var(--color-border);
  font-weight: 500;
}
.shift-count-table tbody tr:last-child td {
  border-bottom: none;
}
.shift-count-table tbody td:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}
.shift-count-table__swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-block;
}
.shift-count-table__num {
  font-weight: 700;
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
}


/* === Schedule === */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.schedule-item {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  transition: background 0.15s;
}

.schedule-item--active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.schedule-item__time {
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  min-width: 100px;
}

.schedule-item__title {
  flex: 1;
  line-height: 1.4;
}

.schedule-item__progress-track {
  width: 100%;
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: 4px;
  grid-column: 1 / -1;
}

.schedule-item__progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}


/* === Schedule Widget (collapsed) === */
.schedule-widget ~ .calendar-block__toggle {
  /* \u043a\u043e\u0433\u0434\u0430 \u0432\u0438\u0434\u0436\u0435\u0442 \u0432\u0438\u0434\u0435\u043d, \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a */
}
/* \u0412 \u0441\u0432\u0451\u0440\u043D\u0443\u0442\u043E\u043C \u0441\u043E\u0441\u0442\u043E\u044F\u043D\u0438\u0438 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u0443\u043C\u0435\u043D\u044C\u0448\u0430\u0435\u0442\u0441\u044F \u0434\u043E 13px \u0438 \u0443\u0441\u0442\u0443\u043F\u0430\u0435\u0442 \u043C\u0435\u0441\u0442\u043E \u043C\u0438\u043D\u0438-\u0432\u0438\u0434\u0436\u0435\u0442\u0443 */
.calendar-block__header:has(.calendar-block__toggle--collapsed) .calendar-block__title-text {
  font-size: 13px;
  flex: 0 0 auto;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* \u0423 \u0431\u043B\u043E\u043A\u0430 \u00AB\u0420\u0430\u0441\u043F\u043E\u0440\u044F\u0434\u043E\u043A \u0434\u043D\u044F\u00BB \u0432 \u0441\u0432\u0451\u0440\u043D\u0443\u0442\u043E\u043C \u0432\u0438\u0434\u0435 \u0437\u0430\u0433\u043E\u043B\u043E\u0432\u043E\u043A \u043F\u0440\u044F\u0447\u0435\u0442\u0441\u044F \u2014 \u0442\u0435\u043A\u0443\u0449\u0430\u044F \u0430\u043A\u0442\u0438\u0432\u043D\u043E\u0441\u0442\u044C \u0438 \u0435\u0441\u0442\u044C \u043A\u043E\u043D\u0442\u0435\u043A\u0441\u0442 */
.calendar-block[data-block-id="schedule"] .calendar-block__header:has(.calendar-block__toggle--collapsed) .calendar-block__title-text {
  display: none;
}


/* === Day Info === */
.day-info__date {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.day-info__holiday {
  color: var(--color-team-4);
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 14px;
}

.day-info__team {
  font-size: 14px;
  margin-bottom: 12px;
  color: var(--color-on-surface-secondary);
}

.day-info__notes {
  width: 100%;
  min-height: 80px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-family);
  font-size: 13px;
  resize: vertical;
  outline: none;
  background: var(--color-surface);
  color: var(--color-on-surface);
  transition: border-color 0.2s;
}
.day-info__notes:focus {
  border-color: var(--color-primary);
}


/* === Settings (inline under calendar) === */
.settings-toggle-header {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  user-select: none;
}
.settings-toggle-header:hover {
  color: var(--color-primary);
}

.settings-toggle-arrow {
  font-size: 12px;
  transition: transform 0.2s;
  color: var(--color-on-surface-secondary);
}

.settings-panel {
  margin-top: 16px;
}

.settings-group {
  margin-bottom: 16px;
}

.settings-group__label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-on-surface-secondary);
}

.settings-group input[type="number"] {
  width: 80px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-family);
  outline: none;
  background: var(--color-surface);
  color: var(--color-on-surface);
}
.settings-group input[type="number"]:focus {
  border-color: var(--color-primary);
}

.settings-colors {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-color-pill {
  position: relative;
  padding: 6px 14px;
  border-radius: 20px;
  border: 2px solid transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  font-family: var(--font-family);
  transition: opacity 0.2s;
}
[data-theme="dark"] .settings-color-pill {
  color: #000;
}
.settings-color-pill:hover {
  opacity: 0.85;
}

.settings-color-pill input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Shift selector (arrows + team name) */
.settings-shift-selector {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-shift-selector__btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface);
  transition: background 0.15s;
}
.settings-shift-selector__btn svg {
  width: 18px;
  height: 18px;
}

.settings-shift-selector__btn:hover {
  background: var(--color-hover);
}

.settings-shift-selector__label {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  color: #fff;
}
[data-theme="dark"] .settings-shift-selector__label {
  color: #000;
}

.settings-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-primary {
  padding: 8px 20px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-family);
  transition: opacity 0.15s;
}
.btn-primary:hover {
  opacity: 0.9;
}

.btn-secondary {
  padding: 8px 20px;
  background: var(--color-hover);
  color: var(--color-on-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.15s;
}
.btn-secondary:hover {
  background: var(--color-active);
}


/* === Holiday block === */
.holidays-list {
  font-size: 14px;
}

.holiday-item {
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.holiday-item__date {
  font-weight: 600;
  color: var(--color-primary);
  min-width: 50px;
}

.holiday-item__name {
  color: var(--color-on-surface);
}

/* === Datepicker (выбор месяца/года) === */
.modal-content--datepicker {
  width: 360px;
  max-width: 90vw;
  padding: 0;
  overflow: hidden;
}
.datepicker-year {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.datepicker-year__label {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-on-surface);
}
.datepicker-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.datepicker-month {
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-on-surface);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.datepicker-month:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-color: var(--color-primary);
}
.datepicker-month--today {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.datepicker-month--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
[data-theme="dark"] .datepicker-month--active {
  color: #000;
}

/* === Поиск по заметкам === */
.modal-content--notes-search {
  width: 520px;
  max-width: 92vw;
  max-height: 80vh;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-content--notes-search .modal-content__body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notes-search__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-on-surface);
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.notes-search__input:focus {
  border-color: var(--color-primary);
}
.notes-search__count {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}
.notes-search__list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 4px;
}
.notes-search__item {
  text-align: left;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  color: var(--color-on-surface);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.15s;
}
.notes-search__item + .notes-search__item {
  border-top: 1px solid var(--color-border);
  border-radius: 0;
}
.notes-search__item:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.notes-search__date {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
}
.notes-search__text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-on-surface);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}
.notes-search__text mark {
  background: color-mix(in srgb, var(--color-primary) 35%, transparent);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* css/tools/weather-news.css */
/* === Universal mini-widgets (collapsed state) === */
.shift-count-mini,
.day-info-mini,
.holidays-mini,
.news-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.shift-count-mini__item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shift-count-mini__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.shift-count-mini__value {
  font-weight: 600;
  color: var(--color-on-surface);
}

.day-info-mini__sep,
.holidays-mini__sep {
  color: var(--color-on-surface-secondary);
  opacity: 0.4;
}
.day-info-mini__team {
  font-weight: 700;
}

.holidays-mini__date {
  font-weight: 700;
  color: var(--color-on-surface);
}
.holidays-mini__name {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.holidays-mini__count {
  color: var(--color-on-surface-secondary);
  font-size: 12px;
  margin-left: 4px;
}
.holidays-mini__empty,
.news-mini__empty {
  color: var(--color-on-surface-secondary);
  font-size: 12px;
  font-style: italic;
}
.news-mini__count {
  font-weight: 700;
  color: var(--color-on-surface);
}
.news-mini__sep {
  color: var(--color-on-surface-secondary);
  opacity: 0.4;
  margin: 0 6px;
}
.news-mini__updated {
  color: var(--color-on-surface-secondary);
  font-size: 12px;
}

.calendar-block__header-action {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-on-surface-secondary);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.calendar-block__header-action:hover {
  background: var(--color-hover);
  color: var(--color-on-surface);
}
.calendar-block__header-action svg { display: block; }

.schedule-widget {
  flex: 1;
  min-width: 0;
}

.schedule-widget__header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.schedule-widget__time {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
}

.schedule-widget__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-surface);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.schedule-widget__progress-track {
  height: 4px;
  background: var(--color-border);
  border-radius: 3px;
  margin-top: 6px;
  overflow: hidden;
}

.schedule-widget__progress-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.schedule-widget__empty {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}


/* === Weather Widget === */
.weather-widget {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.weather-current {
  display: flex;
  align-items: center;
  gap: 16px;
}

.weather-current__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  color: var(--color-on-surface);
}

.weather-current__icon svg,
.weather-current__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.weather-current__info {
  flex: 1;
}

.weather-current__temp {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.weather-current__desc {
  font-size: 14px;
  color: var(--color-on-surface-secondary);
  margin-top: 4px;
  text-transform: capitalize;
}

.weather-current__city {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  margin-top: 2px;
}

.weather-details {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--color-on-surface-secondary);
}

.weather-details__item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.weather-details__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.weather-details__icon svg {
  width: 100%;
  height: 100%;
}

.weather-details__label {
  font-weight: 600;
}

.weather-forecast {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding-bottom: 4px;
}

/* Horizontal scrollbar for weather forecast */
.weather-forecast::-webkit-scrollbar {
  height: 4px;
}
.weather-forecast::-webkit-scrollbar-track {
  background: var(--color-bg);
  border-radius: 2px;
}
.weather-forecast::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}
.weather-forecast::-webkit-scrollbar-thumb:hover {
  background: var(--color-on-surface-secondary);
}

.weather-forecast__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  padding: 6px 4px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  gap: 3px;
}

.weather-forecast__item--now {
  background: var(--color-primary-light);
}

.weather-forecast__hour {
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  font-size: 10px;
}

.weather-forecast__icon {
  width: 22px;
  height: 22px;
  color: var(--color-on-surface);
}

.weather-forecast__icon svg,
.weather-forecast__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.weather-forecast__temp {
  font-weight: 700;
}

.weather-forecast__wind {
  display: flex;
  align-items: center;
  gap: 1px;
  font-size: 10px;
  color: var(--color-on-surface-secondary);
}

.weather-forecast__wind-arrow {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
}

/* Weather mini-widget (collapsed state) */
.weather-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  white-space: nowrap;
}

.weather-mini__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-on-surface);
}

.weather-mini__icon svg,
.weather-mini__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

.weather-mini__temp {
  font-weight: 700;
  font-size: 15px;
}

.weather-mini__desc {
  color: var(--color-on-surface-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
}

.weather-mini__sep {
  color: var(--color-on-surface-secondary);
  opacity: 0.4;
}

.weather-mini__wind,
.weather-mini__detail {
  color: var(--color-on-surface-secondary);
  font-size: 12px;
}

.weather-loading, .weather-error {
  text-align: center;
  padding: 20px;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
}

.weather-error__retry {
  margin-top: 8px;
  padding: 6px 16px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-family);
}
[data-theme="dark"] .weather-error__retry {
  color: #000;
}


/* === News Widget (horizontal scroll, mobile-style cards) === */
.news-list {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 24px 0 20px;
}
.news-item {
  position: relative;
  flex: 0 0 220px;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  scroll-snap-align: start;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.news-item:hover {
  transform: scale(1.3);
  z-index: 3;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
/* Крайние карточки расширяются внутрь, иначе обрезаются родителем
   (.news-list имеет overflow-x: auto и область просмотра ограничена). */
.news-item:first-child {
  transform-origin: center left;
}
.news-item:last-child {
  transform-origin: center right;
}

.news-item__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Градиент снизу — чтобы белый текст читался на картинке (аналог Flutter-версии) */
.news-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.55) 75%,
    rgba(0, 0, 0, 0.85) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Без картинки — плейсхолдер-фон (как в мобильном приложении),
   оверлей оставляем градиентным, чтобы текст читался. */
.news-item--no-image {
  background-image: url('assets/news/newsBack.jpg');
  background-size: cover;
  background-position: center;
}

.news-item__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px 10px;
  color: #fff;
  z-index: 2;
  transform-origin: bottom left;
  transition: transform 0.2s ease, bottom 0.2s ease;
}
/* Компенсируем scale(1.3) карточки, чтобы визуальный размер текста не менялся;
   bottom поднимаем, чтобы освободить полосу под источник. */
.news-item:hover .news-item__content {
  transform: scale(0.7692);
  bottom: 18px;
}

.news-item__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.news-item__meta {
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.news-item__source {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* padding/font уменьшены в ~1.3 раза — при scale(1.3) карточки
     визуально получатся исходные 10px и 5/10px отступы, а сама плашка
     остаётся во всю ширину без transform-scale. */
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.2px;
  text-align: right;
  z-index: 3;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-item:hover .news-item__source {
  opacity: 1;
  transform: translateY(0);
}

.news-loading {
  text-align: center;
  padding: 20px;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
}

/* css/tools/rasporyadok.css */
/* === Распорядок дня (инструмент) === */
.main-content:has(.rasporyadok-page) {
  padding-top: 0;
}

.rasporyadok-page {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 60px;
  width: 100%;
}

.rasporyadok-hint {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  padding: 4px 4px 8px;
}

.rasporyadok-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rasporyadok-row {
  display: flex;
  flex-direction: column;
  position: relative;
}
.rasporyadok-row--dragging { opacity: 0.4; }
.rasporyadok-row--drag-over .rasporyadok-item {
  outline: 2px dashed var(--color-primary);
  outline-offset: -2px;
}
.rasporyadok-row__body {
  display: flex;
  align-items: stretch;
  gap: 8px;
  padding: 0 4px;
}

.rasporyadok-item__drag {
  width: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  color: var(--color-on-surface-secondary);
  cursor: grab;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.rasporyadok-item__drag:hover {
  background: var(--color-hover);
  color: var(--color-on-surface);
}
.rasporyadok-item__drag:active { cursor: grabbing; }

.rasporyadok-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  min-width: 0;
  transition: border-color 0.15s, background 0.15s;
}
.rasporyadok-item:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
}
@keyframes rasporyadokHighlightFade {
  0% {
    background: color-mix(in srgb, var(--color-primary) 38%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 65%, transparent);
  }
  100% {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
    border-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
  }
}
.rasporyadok-item--highlight {
  animation: rasporyadokHighlightFade 3s ease-out forwards;
}
.rasporyadok-item__meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--color-on-surface-secondary);
}
.rasporyadok-item__time {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 12px;
}
.rasporyadok-item__duration {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  white-space: nowrap;
}
.rasporyadok-item__title-wrap {
  flex: 1;
  display: flex;
  align-items: flex-start;
  min-width: 0;
}
.rasporyadok-item__title {
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-on-surface);
  word-break: break-word;
  cursor: text;
  padding: 2px 0;
  border-radius: 4px;
  width: 100%;
  text-align: left;
}
.rasporyadok-item__title:hover {
  background: var(--color-hover);
}
.rasporyadok-item__title-input {
  width: 100%;
  font-size: 14px;
  font-family: inherit;
  padding: 2px 6px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-on-surface);
  outline: none;
}

.rasporyadok-item__delete,
.rasporyadok-item__delete-placeholder {
  width: 26px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
  color: color-mix(in srgb, #f44336 70%, transparent);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
.rasporyadok-item__delete:hover {
  background: color-mix(in srgb, #f44336 15%, transparent);
  color: #f44336;
}

.rasporyadok-item__add-btn {
  align-self: flex-start;
  margin-left: 46px;
  width: 48px;
  height: 18px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: color-mix(in srgb, var(--color-primary) 60%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.rasporyadok-item__add-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: var(--color-primary);
}
.rasporyadok-item__add-btn--top {
  border-radius: 6px 6px 0 0;
}
.rasporyadok-item__add-btn--bottom {
  border-radius: 0 0 6px 6px;
}

.rasporyadok-item__resize {
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ns-resize;
  touch-action: none;
  margin: 2px 0;
}
.rasporyadok-item__resize-pill {
  width: 50px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-primary) 40%, transparent);
  transition: background 0.15s, width 0.15s;
}
.rasporyadok-item__resize:hover .rasporyadok-item__resize-pill {
  background: var(--color-primary);
  width: 70px;
}

/* css/tools/conspects.css */
/* === Конспекты === */
.main-content:has(.conspects) {
  padding: 16px;
  overflow: hidden;
}

.conspects {
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 16px;
  height: 100%;
  min-height: 0;
}

.conspects__master {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.conspects__detail {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.conspects__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border);
  gap: 8px;
  flex-shrink: 0;
}

.conspects__header-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conspects__refresh {
  flex-shrink: 0;
}
.conspects__refresh[disabled] {
  opacity: 0.5;
  cursor: default;
}

.conspects__cat-list {
  list-style: none;
  padding: 6px 0 var(--global-ad-safe-bottom);
  margin: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: none;
}
.conspects__cat-list::-webkit-scrollbar {
  display: none;
}

.conspects__cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-left: 3px solid transparent;
}
.conspects__cat-item:hover {
  background: var(--color-hover);
}
.conspects__cat-item--active,
.conspects__cat-item--active:hover {
  background: var(--color-bg);
  border-left-color: var(--color-primary);
}

.conspects__cat-item--all {
  border-bottom: 1px solid var(--color-border);
}
.conspects__cat-item--all .conspects__cat-title {
  font-weight: 600;
}

.conspects__cat-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-on-surface);
  line-height: 1.35;
}
.conspects__cat-item--active .conspects__cat-title {
  color: var(--color-primary);
  font-weight: 600;
}

.conspects__cat-count {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  background: var(--color-bg);
  border-radius: 999px;
  padding: 2px 8px;
  min-width: 28px;
  text-align: center;
  margin-right: 16px;
}
.conspects__cat-item--active .conspects__cat-count {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.conspects__search-wrap {
  padding: 0 0 12px 0;
  flex-shrink: 0;
}
.conspects__search-wrap .search-count {
  display: block;
  margin-top: 4px;
  padding: 0 2px;
}
.conspects__search-wrap .search-count:empty {
  display: none;
}

.conspects__search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: var(--font-family);
  outline: none;
  background: var(--color-surface);
  color: var(--color-on-surface);
  transition: border-color 0.2s;
}
.conspects__search:focus {
  border-color: var(--color-primary);
}

.conspects__list {
  list-style: none;
  padding: 0 0 var(--global-ad-safe-bottom);
  margin: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: none;
}
.conspects__list::-webkit-scrollbar {
  display: none;
}

.conspects__item {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-on-surface);
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.conspects__item:hover {
  background: var(--color-hover);
}
.conspects__item:active {
  transform: scale(0.997);
}

.conspects__item-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-on-surface);
}

.conspects__item-source {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  margin-top: 4px;
}

.conspects__ad-li {
  list-style: none;
  margin: 0;
}
.conspects__ad-li .yandex-ad {
  width: 100%;
  margin: 0;
}

.conspects__mark {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 700;
  border-radius: 2px;
  padding: 0 2px;
}

.conspects__state {
  padding: 24px 16px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
  list-style: none;
}
.conspects__state--error {
  color: #d32f2f;
}
[data-theme="dark"] .conspects__state--error {
  color: #ff8a80;
}

.conspects__retry {
  margin-top: 10px;
  padding: 6px 14px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
[data-theme="dark"] .conspects__retry {
  color: #000;
}
.conspects__retry:hover {
  opacity: 0.9;
}

/* css/tools/gdzs.css */
/* === ГДЗС === */
.gdzs-page {
  width: 100%;
}

.gdzs-body {
  container-type: inline-size;
}

.gdzs-tabs {
  margin-bottom: 16px;
}

.gdzs-block {
  margin-bottom: 14px;
}
.gdzs-block > div.tool-accordion__header {
  cursor: default;
}
.gdzs-block > div.tool-accordion__header:hover .tool-accordion__title {
  color: var(--color-on-surface);
}
.gdzs-calc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
  gap: 14px;
  margin-bottom: 14px;
  align-items: stretch;
}
/* Пока ширины на 3 колонки не хватает — блок «Расчёт фактических значений»
   занимает всю строку под калькулятором/результатами */
.gdzs-calc-row > .gdzs-block[data-block-id="fact"] {
  grid-column: 1 / -1;
}
.gdzs-calc-row .gdzs-results--fact {
  grid-template-columns: repeat(2, 1fr);
}
.gdzs-calc-row > .gdzs-block {
  margin-bottom: 0;
}

.gdzs-formulas-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 14px;
  align-items: start;
}
.gdzs-formulas-row > .gdzs-block {
  margin-bottom: 0;
}

@container (min-width: 1100px) {
  .gdzs-calc-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 220px) minmax(0, 300px);
  }
  .gdzs-calc-row > .gdzs-block[data-block-id="fact"] {
    grid-column: auto;
  }
  .gdzs-calc-row .gdzs-results--fact {
    grid-template-columns: minmax(0, 1fr);
  }
  .gdzs-formulas-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.gdzs-calc-row .gdzs-form {
  gap: 12px;
}
.gdzs-calc-row .gdzs-form-row {
  grid-template-columns: 1fr;
  gap: 6px;
}
.gdzs-calc-row .gdzs-form-input {
  max-width: 100%;
  width: 100%;
}
.gdzs-calc-row .gdzs-segmented {
  display: flex;
  width: 100%;
}
.gdzs-calc-row .gdzs-segmented .gdzs-seg {
  flex: 1 1 auto;
  text-align: center;
  padding: 7px 10px;
}
.gdzs-calc-row .gdzs-segmented--round {
  flex-wrap: wrap;
}
.gdzs-calc-row .gdzs-segmented--round .gdzs-seg {
  flex: 1 1 calc(50% - 8px);
  font-size: 12px;
}
.gdzs-calc-row .gdzs-results {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.gdzs-calc-row .gdzs-result {
  padding: 6px 10px;
}
.gdzs-calc-row .gdzs-result__label {
  font-size: 11px;
  margin-bottom: 2px;
}
.gdzs-calc-row .gdzs-result__value {
  font-size: 15px;
}
.gdzs-calc-row .gdzs-result__unit {
  font-size: 11px;
}
.gdzs-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gdzs-form-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 16px;
}
.gdzs-form-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.gdzs-form-hint {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-on-surface-secondary);
  margin-left: 4px;
}
.gdzs-form-input {
  height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-on-surface);
  font-size: 14px;
  font-family: var(--font-family);
  transition: border-color 0.15s, background 0.15s;
  max-width: 240px;
}
.gdzs-form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
}
input[type="time"].gdzs-form-input {
  font-variant-numeric: tabular-nums;
  color-scheme: light;
}
[data-theme="dark"] input[type="time"].gdzs-form-input { color-scheme: dark; }

.gdzs-segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 4px;
  border: 1px solid var(--color-border);
}
.gdzs-seg {
  padding: 7px 14px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  font-family: var(--font-family);
  transition: background 0.15s, color 0.15s;
}
.gdzs-seg:hover { background: var(--color-hover); }
.gdzs-seg--active {
  background: var(--color-primary);
  color: #fff;
}
.gdzs-seg--active:hover { background: var(--color-primary); opacity: 0.92; }
.gdzs-segmented--round { flex-wrap: wrap; }

[data-theme="dark"] .gdzs-seg--active { color: #000; }

.gdzs-form-row .gdzs-segmented { justify-self: start; }

.gdzs-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.gdzs-results--fact {
  grid-template-columns: repeat(2, 1fr);
  margin-top: 14px;
}
.gdzs-result {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.gdzs-result__label {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  font-weight: 600;
  margin-bottom: 4px;
}
.gdzs-result__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.gdzs-result__unit {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  font-weight: 500;
}

.gdzs-formulas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 16px 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
  font-family: 'Cambria Math', 'STIX Two Math', Cambria, 'Times New Roman', serif;
}
.gdzs-frm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1.2;
}
.gdzs-frm__var {
  font-weight: 700;
  font-style: italic;
  color: var(--color-primary);
  font-size: 17px;
}
.gdzs-frm__op {
  color: var(--color-on-surface-secondary);
  font-weight: 500;
  font-size: 16px;
}
.gdzs-frm__pl {
  color: var(--color-on-surface);
  font-style: italic;
}
.gdzs-frm__res {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 17px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.gdzs-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: middle;
  text-align: center;
  line-height: 1.15;
  margin: 0 2px;
}
.gdzs-frac__num {
  padding: 0 8px 2px;
  border-bottom: 1.5px solid currentColor;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.gdzs-frac__den {
  padding: 2px 8px 0;
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.gdzs-formulas__note {
  padding: 4px 6px;
  font-size: 12px;
  font-family: var(--font-family);
  font-style: normal;
  color: var(--color-on-surface-secondary);
}

.gdzs-table-wrap {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.gdzs-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 12px;
  margin: 0;
}
.gdzs-table th,
.gdzs-table td {
  padding: 10px 8px;
  border-right: 1px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}
.gdzs-table th:last-child,
.gdzs-table td:last-child { border-right: none; }
.gdzs-table thead th {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-on-surface);
  font-weight: 500;
  line-height: 1.3;
  border-bottom: 1px solid var(--color-border);
}
.gdzs-table tbody td {
  background: var(--color-surface);
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.gdzs-defs {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gdzs-def {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
}
.gdzs-def:last-child { border-bottom: none; }
.gdzs-def__term {
  margin: 0;
  font-weight: 700;
  color: var(--color-primary);
  font-size: 13.5px;
}
.gdzs-def__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-on-surface);
}

.gdzs-section-text {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--color-on-surface);
  white-space: pre-wrap;
}


/* === ГДЗС: вкладка СИЗОД === */
.gdzs-sizod {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 16px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  min-height: 500px;
}
.gdzs-sizod__sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-right: 1px solid var(--color-border);
  padding-right: 16px;
}
.gdzs-segmented--sizod { width: 100%; }
.gdzs-segmented--sizod .gdzs-seg { flex: 1; }
.gdzs-sizod__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}
.gdzs-sizod__item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-on-surface);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.gdzs-sizod__item:hover { background: var(--color-hover); }
.gdzs-sizod__item--active {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  color: var(--color-primary);
  font-weight: 700;
}
.gdzs-sizod__item--active:hover { background: color-mix(in srgb, var(--color-primary) 25%, transparent); }

.gdzs-sizod__detail {
  padding: 4px 8px 16px;
  overflow-y: auto;
  max-height: calc(100vh - 180px);
}
.gdzs-sizod__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}
.gdzs-ad-slot:empty { display: none; }
.gdzs-ad-slot .yandex-ad { margin: 0 0 14px; }
.gdzs-sizod__detail .gdzs-ad-slot .yandex-ad { margin: 0 0 14px; }

.gdzs-sizod__image {
  float: left;
  max-width: 320px;
  max-height: 260px;
  width: auto;
  height: auto;
  margin: 6px 16px 8px 0;
  object-fit: contain;
  shape-outside: inset(0);
}
.gdzs-sizod__subtitle {
  clear: left;
  margin: 18px 0 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-surface);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gdzs-sizod__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-on-surface);
  white-space: pre-wrap;
}
.gdzs-sizod__empty {
  padding: 40px;
  text-align: center;
  color: var(--color-on-surface-secondary);
}

.gdzs-attrs {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.gdzs-attrs td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.gdzs-attrs tr:last-child td { border-bottom: none; }
.gdzs-attrs__key {
  color: var(--color-on-surface-secondary);
  width: 60%;
}
.gdzs-attrs__val {
  color: var(--color-on-surface);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1400px) {
  .gdzs-results { grid-template-columns: repeat(2, 1fr); }
  .gdzs-form-row { grid-template-columns: 180px 1fr; }
}

/* css/tools/uprazhnenia.css */
/* === Инструмент "Упражнения" === */

.main-content:has(.upr-page) { padding-top: 0; }

.upr-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 0 60px;
  width: 100%;
}

.upr-intro {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  padding: 0 4px;
}

/* Блок коэффициентов */
.upr-coef-block {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  overflow: hidden;
}
.upr-coef-header {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}
.upr-coef-body {
  display: flex;
  padding: 0 16px 14px;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.upr-coef-body .btn--ghost strong {
  font-weight: 700;
  color: var(--color-primary);
}

.upr-items {
  columns: 2 440px;
  column-gap: 8px;
}
.upr-items > .upr-item {
  display: block;
  break-inside: avoid;
  margin-bottom: 4px;
}

/* Специфика упражнения: номер слева от раскрывающегося полного названия */
.upr-item__num {
  font-weight: 700;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--color-on-surface);
}
.upr-item .tool-accordion__subtitle {
  color: var(--color-primary);
}

.upr-item__without-gloves {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  margin-bottom: 6px;
}
.upr-item__dop {
  font-style: italic;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-on-surface) 65%, transparent);
  margin-bottom: 8px;
}

.upr-item__norms {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}
.upr-item__norms--prav {
  font-style: italic;
  font-weight: 600;
}
.upr-norm {
  display: flex;
  gap: 6px;
  font-size: 13px;
}
.upr-norm__label { color: var(--color-on-surface-secondary); }
.upr-norm__value {
  font-weight: 700;
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
}

.upr-item__conditions-label {
  font-weight: 700;
  margin-top: 6px;
}
.upr-item__text {
  font-size: 13px;
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-on-surface) 90%, transparent);
}

/* Модалка коэффициентов — уникальные расширения поверх .tool-modal */
.upr-coef-modal__warn {
  padding: 10px 20px;
  font-size: 12px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-bottom: 1px solid var(--color-border);
}

.upr-coef-cond {
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.upr-coef-cond:last-child { border-bottom: none; }
.upr-coef-cond__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 8px;
}

.upr-coef-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}
.upr-coef-sub:hover { background: var(--color-hover); }
.upr-coef-sub--checked { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.upr-coef-sub--nested { padding-left: 18px; }
.upr-coef-sub--group {
  cursor: default;
  display: block;
  padding: 6px 0 0;
}
.upr-coef-sub--group:hover { background: transparent; }
.upr-coef-sub--group .upr-coef-sub__title {
  font-weight: 700;
  margin-bottom: 4px;
  display: block;
}
.upr-coef-sub__title {
  flex: 1;
  font-size: 13px;
  color: var(--color-on-surface);
  line-height: 1.35;
}
.upr-coef-sub__coef {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.upr-coef-sub__nested {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* css/tools/stopwatch.css */
/* === История секундомера (модалка + кнопки в карточках) === */

.upr-item__history-btn,
.fyz-item__history-btn {
  align-self: stretch;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--color-primary);
  border: none;
  color: #fff;
}
.upr-item__history-btn:hover:not([disabled]),
.fyz-item__history-btn:hover:not([disabled]) {
  background: var(--color-primary);
  border: none;
  color: #fff;
  filter: brightness(1.08);
}
[data-theme="dark"] .upr-item__history-btn,
[data-theme="dark"] .fyz-item__history-btn,
[data-theme="dark"] .upr-item__history-btn:hover:not([disabled]),
[data-theme="dark"] .fyz-item__history-btn:hover:not([disabled]) {
  color: #000;
}
.upr-item__history-btn svg,
.fyz-item__history-btn svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.swh-modal__content {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.swh-modal__subtitle {
  padding: 16px 20px 12px;
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.swh-modal__body { padding-top: 8px; }

.swh-modal__actions {
  display: flex;
  justify-content: flex-end;
  padding: 8px 20px 0;
}
.swh-modal__clear {
  background: transparent;
  border: none;
  padding: 6px 8px;
  font-size: 12px;
  color: #F44336;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}
.swh-modal__clear:hover {
  background: color-mix(in srgb, #F44336 12%, transparent);
}

.swh-row__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: var(--radius-sm);
  color: var(--color-on-surface-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.swh-row__delete:hover {
  background: color-mix(in srgb, #F44336 12%, transparent);
  color: #F44336;
}

.swh-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 13px;
}

.swh-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.swh-row {
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.swh-row:last-child { border-bottom: none; }

.swh-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.swh-row__left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.swh-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.swh-row__date {
  color: var(--color-on-surface-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.swh-row__right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.swh-row__time {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  color: var(--color-on-surface);
}

.swh-row__laps-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.swh-row__laps-toggle:hover {
  background: var(--color-hover);
  color: var(--color-on-surface);
}
.swh-row__laps-toggle svg {
  transition: transform 0.2s ease;
}
.swh-row--laps-open .swh-row__laps-toggle svg {
  transform: rotate(180deg);
}

.swh-row__laps {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.swh-row--laps-open .swh-row__laps {
  grid-template-rows: 1fr;
}
.swh-row__laps-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.swh-row--laps-open .swh-row__laps-inner {
  margin-top: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  border-radius: var(--radius-sm);
}

.swh-lap {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.swh-lap__num {
  min-width: 60px;
  color: var(--color-on-surface-secondary);
}
.swh-lap__time {
  margin-left: auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-on-surface);
}

.swh-grade {
  display: inline-flex;
  align-items: baseline;
  font-weight: 700;
  font-size: 14px;
  min-width: 22px;
  justify-content: center;
}
.swh-grade__sep {
  color: color-mix(in srgb, var(--color-on-surface) 50%, transparent);
  font-weight: 400;
  margin: 0 1px;
}

/* css/tools/fysych.css */
/* === Физическая подготовка === */

.main-content:has(.fyz-page) { padding-top: 0; }

.fyz-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 0 60px;
  width: 100%;
}

.fyz-intro {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  padding: 0 4px;
}

/* Сетка секций: автоматически 2 колонки при ширине >= ~850px, иначе 1 */
.fyz-sections {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 16px;
  align-items: start;
}

/* Блок возрастных групп внутри секции */
.fyz-section__age-info {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface);
  background: color-mix(in srgb, var(--color-primary) 5%, transparent);
  border: 1px solid var(--color-border);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-top: 8px;
  margin-bottom: 12px;
}

/* Элементы упражнений */
.fyz-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fyz-item__text {
  margin-bottom: 12px;
}

.fyz-item__grades-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-on-surface);
}

/* Таблица нормативов */
.fyz-table-wrapper {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.fyz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.fyz-table thead tr {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.fyz-table th,
.fyz-table td {
  border: none;
  border-right: 1px solid var(--color-border);
}

.fyz-table th:first-child,
.fyz-table td:first-child {
  border-left: none;
}

.fyz-table th:last-child,
.fyz-table td:last-child {
  border-right: none;
}

.fyz-table thead th {
  border-bottom: 1px solid var(--color-border);
}

.fyz-table tbody tr td {
  border-bottom: 1px solid var(--color-border);
}

.fyz-table tbody tr:last-child td {
  border-bottom: none;
}

.fyz-table__header-cell {
  padding: 10px 8px;
  font-weight: 700;
  text-align: center;
}

.fyz-table__header-cell--label {
  text-align: left;
  padding-left: 12px;
}

.fyz-table__row--middle {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.fyz-table__label {
  padding: 10px 12px;
  font-weight: 700;
  text-align: left;
}

.fyz-table__value {
  padding: 10px 8px;
  text-align: center;
}

/* css/tools/usl.css */
/* === Условные обозначения (usl) === */

.main-content:has(.usl-page) { padding-top: 0; }

.usl-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 0 60px;
  width: 100%;
}

.usl-page .tool-toolbar__actions > #usl-toggle-all {
  height: 32px;
  padding: 0 12px;
}

.usl-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 32px;
  min-width: 260px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 6px 0 28px;
  transition: border-color 0.15s;
}
.usl-search:focus-within {
  border-color: var(--color-primary);
}
.usl-search__icon {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-on-surface-secondary);
  pointer-events: none;
  display: flex;
}
.usl-search__input {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-on-surface);
  font-size: 13px;
  padding: 0;
  min-width: 0;
}
.usl-search__input::-webkit-search-cancel-button,
.usl-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.usl-search__clear {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-on-surface-secondary);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
}
.usl-search__clear:hover {
  background: color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  color: var(--color-on-surface);
}

.usl-mark {
  background: color-mix(in srgb, var(--color-primary) 35%, transparent);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.usl-item--hidden { display: none !important; }
.usl-block--hidden { display: none !important; }

.usl-page--searching .tool-accordion__header { cursor: default; }
.usl-page--searching .tool-accordion__chevron { visibility: hidden; }

.usl-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
}

.usl-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  padding: 10px;
}
.usl-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition: border-color 0.15s, transform 0.1s;
}
.usl-item:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.usl-item__img {
  width: 100%;
  height: 80px;
  background: #fff;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.usl-item__img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.usl-item__text {
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-on-surface-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.usl-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 40px;
  animation: usl-fade-in 0.15s ease-out;
}
@keyframes usl-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.usl-lightbox__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  max-width: min(900px, 90vw);
  max-height: 90vh;
}
.usl-lightbox__img {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 70vh;
  overflow: hidden;
}
.usl-lightbox__img img {
  max-width: 100%;
  max-height: calc(70vh - 48px);
  object-fit: contain;
}
.usl-lightbox__caption {
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  max-width: 700px;
}
.usl-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}
.usl-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* css/tools/med.css */
/* === Первая (доврачебная) помощь (med) === */

.main-content:has(.med-page) { padding-top: 0; }

.med-page {
  display: flex;
  flex-direction: column;
  padding: 0 0 60px;
  width: 100%;
}

.med-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 4px;
}

.med-intro {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-on-surface-secondary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.med-intro strong {
  color: var(--color-on-surface);
}

.med-static-blocks {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.med-heading {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-on-surface);
  padding: 12px 8px 0;
  margin: 8px 0 0;
}

.med-definition-short {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-on-surface);
  padding: 0 8px 4px;
}

.med-list {
  display: flex;
  flex-direction: column;
}

.med-block .tool-accordion__title,
.med-item .tool-accordion__title {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 15px;
}

.med-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-on-surface);
  white-space: normal;
}
.med-text strong {
  color: var(--color-on-surface);
}

.med-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 12px;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition: transform 0.1s;
}
.med-image:hover {
  transform: scale(1.01);
}

.med-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
.med-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
  transition: background 0.15s;
}
.med-link:last-child {
  border-bottom: none;
}
.med-link:hover {
  background: var(--color-hover);
}
.med-link__text {
  flex: 1;
  min-width: 0;
}
.med-link__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-secondary);
}

/* css/tools/oxpa.css */
/* === Охрана труда (oxpa) === */

.main-content:has(.oxpa-page) { padding-top: 0; }

.oxpa-page {
  display: flex;
  flex-direction: column;
  padding: 0 0 60px;
  width: 100%;
}

.oxpa-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 16px 4px;
}

.oxpa-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.oxpa-section__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
  padding: 0 8px;
}

.oxpa-section__images {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.oxpa-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  box-shadow: var(--shadow);
  transition: transform 0.1s;
}
.oxpa-image:hover {
  transform: scale(1.005);
}

.oxpa-section__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px;
}

.oxpa-paragraph {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-on-surface);
  margin: 0;
}

/* css/tools/rtp.css */
/* === Расчёт сил и средств (rtp) === */

.main-content:has(.rtp-page) { padding-top: 0; }

.rtp-page {
  display: flex;
  flex-direction: column;
  padding: 0 0 40px;
  width: 100%;
}

.rtp-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 2px;
}

.rtp-intro {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rtp-intro__heading {
  font-weight: 700;
  font-style: italic;
  color: var(--color-primary);
  font-size: 14px;
}

.rtp-intro__list {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface);
}

.rtp-block.tool-accordion--card {
  padding: 10px 14px;
}

.rtp-block .tool-accordion__title {
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-primary);
}

.rtp-block .tool-accordion__body-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rtp-text {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-on-surface);
  margin: 0;
  white-space: normal;
}

.rtp-text b,
.rtp-text i,
.rtp-formula b,
.rtp-formula i {
  font-style: italic;
}

.rtp-text sub,
.rtp-formula sub {
  font-size: 0.72em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  bottom: -0.3em;
}

.rtp-text sup,
.rtp-formula sup {
  font-size: 0.72em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

.rtp-formula {
  display: block;
  text-align: center;
  margin: 4px auto;
  padding: 8px 12px;
  font-size: 15px;
  line-height: 1.7;
  font-family: 'Cambria Math', 'STIX Two Math', 'Georgia', serif;
  color: var(--color-on-surface);
  background: color-mix(in srgb, var(--color-primary) 7%, transparent);
  border-radius: var(--radius-sm);
  max-width: 100%;
  overflow-x: auto;
}

.rtp-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  box-shadow: var(--shadow);
  align-self: center;
  transition: transform 0.1s;
}
.rtp-image:hover {
  transform: scale(1.005);
}

/* css/tools/rashod.css */
/* === Инструмент "Расход воды и пенообразователя" === */

.main-content:has(.rashod-page) { padding-top: 0; }

.rashod-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rashod-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 0 32px;
  container-type: inline-size;
}

/* Водяные + «Свои значения» / пенные — 1 колонка по умолчанию,
   2 — при широком контейнере. Слева водяные + свои, справа — пенные.
   Используем CSS columns — высоты секций независимы, между водяными
   и своими значениями ровно такой же отступ, как горизонтальный. */
.rashod-columns {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@container (min-width: 1000px) {
  .rashod-columns {
    display: block;
    column-count: 2;
    column-gap: 20px;
  }
  .rashod-columns > section {
    display: block;
    width: 100%;
    box-sizing: border-box;
    break-inside: avoid;
    margin-bottom: 20px;
  }
  .rashod-columns > section:nth-of-type(3) {
    break-before: column;
    margin-bottom: 0;
  }
}

.rashod-section {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
}

.rashod-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.rashod-section__head .tool-section__title {
  padding: 0;
}

.rashod-hint {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  margin: 6px 0 0;
  padding: 0 4px;
  line-height: 1.4;
}

/* Водоотдача — картинка на всю ширину */
.rashod-vodootdacha {
  display: flex;
  justify-content: center;
  padding: 8px 0 4px;
}

.rashod-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  transition: transform 0.15s;
}
.rashod-image:hover {
  transform: scale(1.01);
}

/* Переключатель режима */
.rashod-tabs {
  margin-top: 4px;
}

/* Ёмкости и свои значения — grid 2 колонки */
.rashod-capacity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 0 4px;
}

.rashod-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rashod-field__label {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  padding: 0 4px;
}

.rashod-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s;
  -moz-appearance: textfield;
}
.rashod-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.rashod-input::-webkit-outer-spin-button,
.rashod-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Список стволов */
.rashod-list {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}

.rashod-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.rashod-row:last-child {
  border-bottom: none;
}

.rashod-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rashod-row__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.rashod-row__sub {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}
.rashod-row__result {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 500;
  margin-top: 2px;
}

/* Счётчик +/− */
.rashod-counter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.rashod-counter__btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-on-surface);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rashod-counter__btn:hover:not(:disabled) {
  background: var(--color-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.rashod-counter__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.rashod-counter__value {
  min-width: 28px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
}

/* Итоги */
.rashod-totals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: var(--radius-sm);
}
.rashod-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.rashod-total__label {
  color: var(--color-on-surface-secondary);
}
.rashod-total__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
}

/* ТТХ-аккордеон с картинкой */
.rashod-ttx {
  margin-top: 12px;
}
.rashod-ttx__img {
  width: 100%;
  margin: 8px 0 4px;
}

/* css/tools/fuel.css */
/* === Инструмент "Расход топлива ПА" === */

.main-content:has(.fuel-page) { padding-top: 0; }

/* Тулбар fuel-страницы без боковых отступов */
.fuel-page > .tool-toolbar {
  padding-left: 0;
  padding-right: 0;
}
.fuel-page .tool-toolbar__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.fuel-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fuel-content {
  padding: 16px 0 32px;
}

.fuel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}

.fuel-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.fuel-right {
  position: sticky;
  top: 64px;
  min-width: 0;
}
.fuel-right-sticky {
  display: flex;
  flex-direction: column;
}

@media (max-width: 1100px) {
  .fuel-inner {
    grid-template-columns: 1fr;
  }
  .fuel-right { position: static; }
}

/* Селектор текущего автомобиля */
.fuel-vehicle-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  border-radius: 12px;
  color: var(--color-on-surface);
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fuel-vehicle-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-color: var(--color-primary);
}
.fuel-vehicle-btn__title {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fuel-vehicle-btn__chevron {
  display: inline-flex;
  color: var(--color-primary);
}

/* Компактная версия кнопки в тулбаре */
.fuel-vehicle-btn--toolbar {
  height: 34px;
  min-width: 180px;
  max-width: 280px;
  padding: 0 10px 0 12px;
  font-size: 13px;
  gap: 8px;
}
.fuel-vehicle-btn--toolbar .fuel-vehicle-btn__chevron svg {
  width: 18px;
  height: 18px;
}

/* Строка с инпутом + описанием */
.fuel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.fuel-row--season {
  padding-top: 6px;
  padding-bottom: 2px;
}
.fuel-row__label-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.fuel-row__label {
  font-size: 14px;
  color: var(--color-on-surface);
  line-height: 1.3;
}
.fuel-row__hint {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  line-height: 1.3;
}

/* Иконка «замер по карте» — открывает модалку выбора маршрута */
.fuel-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 40px;
  flex-shrink: 0;
  color: var(--color-on-surface-secondary);
}
.fuel-row__icon--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.fuel-row__icon--action {
  color: var(--color-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
}
.fuel-row__icon--action:hover,
.fuel-row__icon--action:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  outline: none;
}

.fuel-input-wrap {
  position: relative;
  width: 110px;
  flex-shrink: 0;
}
.fuel-input-wrap--wide {
  width: 180px;
}
.fuel-input-wrap--datetime {
  width: 210px;
}

.fuel-input {
  width: 100%;
  height: 40px;
  padding: 0 32px 0 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  color: var(--color-on-surface);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 500;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, background 0.15s;
}
.fuel-input:focus {
  background: var(--color-surface);
  border-width: 2px;
  padding-left: 11px;
}
.fuel-input-wrap--wide .fuel-input {
  padding-right: 12px;
}
.fuel-input--datetime {
  padding-right: 10px;
}
[data-theme="dark"] .fuel-input--datetime::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.9;
}

.fuel-input-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  pointer-events: none;
}

.fuel-input--wide {
  width: 100%;
}

/* Кнопка сезона — 1:1 с мобильным (AnimatedContainer 100×40, radius 12,
   цвет Colors.green/blue alpha .7; AnimatedSwitcher слайдит текст сверху). */
.fuel-season-btn {
  width: 100px;
  height: 40px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 12px;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--color-on-surface);
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.fuel-season-btn--summer {
  background: rgba(76, 175, 80, 0.7);
}
.fuel-season-btn--winter {
  background: rgba(33, 150, 243, 0.7);
}
.fuel-season-btn__label {
  display: inline-block;
  line-height: 1;
}
.fuel-page .tool-toolbar .fuel-season-btn {
  width: 86px;
  height: 34px;
  border-radius: 10px;
  font-size: 13px;
}

/* Карточка результатов (сезонный tinted фон + плавный transition фона) */
.fuel-results-card {
  padding: 16px 18px;
  border-radius: 14px;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.fuel-results-card--summer {
  background: color-mix(in srgb, #4CAF50 14%, transparent);
}
.fuel-results-card--winter {
  background: color-mix(in srgb, #2196F3 14%, transparent);
}
.fuel-results-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 4px;
}
.fuel-results-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fuel-results__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-on-surface);
  letter-spacing: 0.2px;
  margin: 0;
}
.fuel-result {
  font-size: 14px;
  color: var(--color-on-surface);
  line-height: 1.4;
}
.fuel-result b {
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.fuel-result--total b {
  color: var(--color-primary);
  font-size: 15px;
}
.fuel-result-secondary {
  font-size: 12px;
  color: var(--color-primary);
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.fuel-result-warning {
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, #D32F2F 12%, transparent);
  color: #D32F2F;
  font-size: 13px;
  line-height: 1.35;
}
[data-theme="dark"] .fuel-result-warning {
  color: #F28B82;
}

/* Строка "Округлять до ... знаков" внутри блока результатов */
.fuel-row--short {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* Toggle доп. полей */
.fuel-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  cursor: pointer;
  user-select: none;
}
.fuel-toggle {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
  background: var(--color-border);
  border-radius: 999px;
  transition: background 0.2s;
}
.fuel-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.fuel-toggle--on {
  background: #4CAF50;
}
[data-theme="dark"] .fuel-toggle--on {
  background: #66BB6A;
}
.fuel-toggle--on .fuel-toggle__knob {
  transform: translateX(18px);
}
.fuel-toggle-row__label {
  font-size: 14px;
  color: var(--color-on-surface);
}

.fuel-toolbar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-on-surface);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fuel-toolbar-toggle:hover {
  background: var(--color-hover);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
.fuel-toolbar-toggle .fuel-toggle {
  width: 38px;
  height: 22px;
}
.fuel-toolbar-toggle .fuel-toggle__knob {
  width: 16px;
  height: 16px;
}
.fuel-toolbar-toggle .fuel-toggle--on .fuel-toggle__knob {
  transform: translateX(16px);
}

.fuel-fieldset {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  border: none;
  border-radius: 10px;
}
.fuel-fieldset__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 2px;
}
.fuel-date-error {
  margin: -2px 0 2px 122px;
  color: #D32F2F;
  font-size: 12px;
  line-height: 1.35;
}
[data-theme="dark"] .fuel-date-error {
  color: #F28B82;
}

.fuel-names {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 0 2px;
}

/* Плавное раскрытие доп. полей (пробег 2/3, названия местностей).
   Негативный margin-top «съедает» flex gap у .fuel-left, чтобы при
   закрытом состоянии не оставалось лишних 10px пустого пространства. */
.fuel-collapsible {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -10px;
  transition: grid-template-rows 0.3s ease, margin-top 0.3s ease;
}
.fuel-collapsible--open {
  grid-template-rows: 1fr;
  margin-top: 0;
}
.fuel-collapsible__inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Суффикс «(Город)» в метке distance1 — показываем только при addOn. */
.fuel-row__label-suffix--hidden {
  display: none;
}

/* Кнопка "Сохранить" в правой панели */
.fuel-save-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--color-primary);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, filter 0.15s;
}
.fuel-save-btn:hover {
  filter: brightness(1.05);
}
[data-theme="dark"] .fuel-save-btn {
  color: #000;
}
.fuel-add-trip-btn {
  margin-top: 10px;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  color: var(--color-primary);
}
.fuel-add-trip-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  filter: none;
}
.fuel-add-trip-btn:disabled {
  background: color-mix(in srgb, var(--color-border) 45%, transparent);
  border-color: var(--color-border);
  color: var(--color-on-surface-secondary);
  cursor: not-allowed;
  opacity: 0.65;
}
.fuel-add-trip-btn:disabled:hover {
  background: color-mix(in srgb, var(--color-border) 45%, transparent);
  border-color: var(--color-border);
}
[data-theme="dark"] .fuel-add-trip-btn {
  color: var(--color-primary);
}
[data-theme="dark"] .fuel-add-trip-btn:disabled {
  color: var(--color-on-surface-secondary);
}

.fuel-trips-panel {
  margin-top: 22px;
  min-width: 0;
}
.fuel-trips-scroll {
  overflow-x: scroll;
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
  scrollbar-width: none;
}
.fuel-trips-scroll::-webkit-scrollbar {
  display: none;
}
.fuel-trips-scrollbar {
  height: 16px;
  margin: 8px -16px 0;
  padding: 0 16px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.fuel-trips-scrollbar::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 5px;
  height: 6px;
  background: color-mix(in srgb, var(--color-border) 70%, transparent);
  border-radius: 999px;
}
.fuel-trips-scrollbar__thumb {
  position: relative;
  z-index: 1;
  top: 5px;
  height: 6px;
  min-width: 52px;
  background: color-mix(in srgb, var(--color-primary) 78%, transparent);
  border-radius: 999px;
  cursor: grab;
  touch-action: none;
}
.fuel-trips-scrollbar__thumb:hover,
.fuel-trips-scrollbar__thumb--dragging {
  background: var(--color-primary);
}
.fuel-trips-scrollbar__thumb--dragging {
  cursor: grabbing;
}
.fuel-trips-table {
  width: 100%;
  min-width: 1240px;
  border-collapse: collapse;
  table-layout: fixed;
  color: var(--color-on-surface);
  font-size: 12px;
}
.fuel-trips-col-num {
  width: 42px;
}
.fuel-trips-col-time {
  width: 57px;
}
.fuel-trips-col-odometer {
  width: 121px;
}
.fuel-trips-col-distance,
.fuel-trips-col-work,
.fuel-trips-col-fuel-work {
  width: 86px;
}
.fuel-trips-col-fuel-distance {
  width: 106px;
}
.fuel-trips-col-total {
  width: 108px;
}
.fuel-trips-col-actions {
  width: 42px;
}
.fuel-trips-table th,
.fuel-trips-table td {
  border: 1px solid var(--color-border);
  padding: 6px;
  text-align: center;
  vertical-align: middle;
}
.fuel-trips-table th {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  font-weight: 700;
  line-height: 1.25;
}
.fuel-trips-table td {
  background: var(--color-bg);
}
.fuel-trips-table .fuel-trips-action-head,
.fuel-trips-table .fuel-trips-action-cell {
  border: none;
  background: transparent;
  padding: 0 0 0 8px;
}
.fuel-trips-num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .35;
}
.fuel-trip-dim {
  opacity: .35;
}
.fuel-trip-input {
  width: 100%;
  height: 32px;
  min-width: 0;
  padding: 0 6px;
  box-sizing: border-box;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--color-on-surface);
  font-family: var(--font-family);
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.fuel-trip-input:focus {
  background: var(--color-surface);
  border-color: var(--color-primary);
}
.fuel-trip-value {
  display: block;
  min-height: 32px;
  line-height: 32px;
  font-variant-numeric: tabular-nums;
}
.fuel-trip-breakdown {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  text-align: left;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.fuel-trip-breakdown__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.fuel-trip-breakdown__row--total {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--color-border);
  font-weight: 700;
}
.fuel-trip-breakdown__name {
  color: var(--color-on-surface-secondary, var(--color-on-surface));
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fuel-trip-breakdown__row--total .fuel-trip-breakdown__name {
  opacity: 1;
}
.fuel-trip-breakdown__value {
  flex: 0 0 auto;
}
.fuel-trip-delete-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #D32F2F 10%, transparent);
  border: none;
  border-radius: 8px;
  color: #D32F2F;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fuel-trip-delete-btn:hover {
  background: #D32F2F;
  color: #fff;
}
[data-theme="dark"] .fuel-trip-delete-btn {
  color: #F28B82;
}
[data-theme="dark"] .fuel-trip-delete-btn:hover {
  color: #fff;
}
.fuel-trips-empty {
  height: 48px;
  color: var(--color-on-surface-secondary);
}
.fuel-trips-table .fuel-trips-total-cell {
  padding: 10px 12px;
  background: transparent;
  color: var(--color-on-surface);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  font-variant-numeric: tabular-nums;
}
.fuel-clear-table-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-top: 10px;
  padding: 0 14px;
  background: color-mix(in srgb, #D32F2F 10%, transparent);
  border: 1px solid color-mix(in srgb, #D32F2F 35%, transparent);
  border-radius: 10px;
  color: #D32F2F;
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fuel-clear-table-btn:hover {
  background: color-mix(in srgb, #D32F2F 16%, transparent);
  border-color: #D32F2F;
}
[data-theme="dark"] .fuel-clear-table-btn {
  color: #F28B82;
}

@media (max-width: 760px) {
  .fuel-page .tool-toolbar {
    height: auto;
    min-height: 48px;
    align-items: flex-start;
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .fuel-page .tool-toolbar__title {
    padding-top: 7px;
  }
  .fuel-toolbar-toggle span:last-child,
  .fuel-scenarios-btn span {
    display: none;
  }
  .fuel-toolbar-toggle {
    padding-right: 8px;
  }
  .fuel-input-wrap--datetime {
    width: 190px;
  }
}

/* Кнопка "Сохранённые сценарии" в аппбаре */
.fuel-scenarios-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-radius: 12px;
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fuel-scenarios-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-color: var(--color-primary);
}

/* Список сохранённых сценариев */
.fuel-scenarios-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fuel-scenario-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fuel-scenario-tile {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--color-on-surface);
  font-family: var(--font-family);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.fuel-scenario-tile:hover {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-color: var(--color-primary);
}
.fuel-scenario-tile__name {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fuel-scenario-tile__date {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}

/* Модалка сохранения — инпут растягивается на всю ширину */
.fuel-scenario-save-field {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.fuel-scenario-save-field .fuel-input-wrap,
.fuel-scenario-save-field .fuel-input {
  width: 100%;
}

/* === Модалка списка === */
.fuel-hint {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface-secondary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 10px;
}

.fuel-vehicle-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fuel-vehicle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fuel-vehicle-tile {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--color-on-surface);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.fuel-vehicle-tile:hover {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.fuel-vehicle-tile--active {
  background: color-mix(in srgb, var(--color-primary) 35%, transparent);
  border-color: var(--color-primary);
}

.fuel-vehicle-action {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--color-on-surface-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.fuel-vehicle-action:hover {
  background: var(--color-hover);
  color: var(--color-on-surface);
}

.tool-modal__footer--between {
  justify-content: space-between;
}

/* === Редактор === */
.fuel-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fuel-editor-field {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fuel-editor-field__label {
  font-size: 13px;
  color: var(--color-on-surface);
  line-height: 1.3;
  flex: 1;
}
.fuel-editor-field .fuel-input-wrap {
  width: 120px;
}
.fuel-editor-field .fuel-input--wide {
  width: 100%;
  padding-right: 12px;
}

.fuel-editor-section-title {
  margin-top: 14px;
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.2px;
}

.fuel-error {
  margin-top: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, #D32F2F 10%, transparent);
  border-radius: 10px;
  color: #D32F2F;
  font-size: 13px;
  line-height: 1.4;
}
[data-theme="dark"] .fuel-error {
  color: #F28B82;
}

/* Кнопка удалить */
.fuel-btn-danger {
  background: #D32F2F;
}
.fuel-btn-danger:hover:not(:disabled) {
  background: #B71C1C;
}
[data-theme="dark"] .fuel-btn-danger {
  color: #fff;
}

/* Confirm-модалка */
.fuel-confirm-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-surface);
}

/* Второй оверлей выше первого */
.fuel-modal-overlay--confirm {
  z-index: 1010;
}
.fuel-modal-overlay--editor {
  z-index: 1005;
}

/* css/tools/ptv.css */
/* === Tool: Пожарно-техническое вооружение === */

.main-content:has(.ptv-page) { padding-top: 0; }

.ptv-page {
  display: flex;
  flex-direction: column;
  padding: 0 0 24px;
}

.ptv-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 0;
}

/* Две колонки при достаточной ширине, иначе одна.
   CSS columns — каждая карточка сохраняет свою высоту, раскрытие
   одной не растягивает соседние в той же строке */
.ptv-list {
  columns: 2 440px;
  column-gap: 8px;
}
.ptv-list > .ptv-item {
  display: block;
  break-inside: avoid;
  margin-bottom: 8px;
}

.ptv-item.tool-accordion--card {
  padding: 10px 14px;
}

.ptv-item .tool-accordion__title {
  font-size: 14px;
  line-height: 1.35;
}

.ptv-item .tool-accordion__body-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ptv-item-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-on-surface);
  white-space: normal;
}

.ptv-image {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  background: var(--color-bg);
}

.ptv-image-caption {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}

.ptv-gost-row {
  display: flex;
  justify-content: flex-start;
}

/* === Календарь испытаний === */

.ptv-calendar-modal-overlay .tool-modal__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
}

.ptv-calendar-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
}

.ptv-calendar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.ptv-calendar-item--soon {
  background: color-mix(in srgb, #FFC107 20%, transparent);
  border-color: color-mix(in srgb, #FFC107 40%, transparent);
}

.ptv-calendar-item--overdue {
  background: color-mix(in srgb, #F44336 20%, transparent);
  border-color: color-mix(in srgb, #F44336 40%, transparent);
}

.ptv-calendar-item__main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.ptv-calendar-item__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ptv-calendar-item__dates {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-on-surface) 75%, transparent);
}
.ptv-calendar-item__dates b {
  color: var(--color-on-surface);
  font-weight: 700;
}

.ptv-calendar-item__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Иконки edit/delete: theme-agnostic — делаем из --color-on-surface,
   чтобы равномерно читаться на primary/overdue/soon фонах. */
.ptv-calendar-item .btn--icon {
  color: var(--color-on-surface);
  opacity: 0.7;
  background: transparent;
}
.ptv-calendar-item .btn--icon:hover:not([disabled]) {
  opacity: 1;
  background: color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  color: var(--color-on-surface);
}

/* === Форма записи === */

.ptv-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ptv-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ptv-form-field > span {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ptv-form-hint {
  display: inline;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-on-surface-secondary);
  margin-left: 6px;
}

.ptv-form-field input {
  height: 42px;
  padding: 0 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
  color-scheme: light;
}
.ptv-form-field input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
/* Нативный пикер type="date" в тёмной теме — рендерим тёмный
   вариант календаря, иначе иконка и попап остаются светлыми. */
[data-theme="dark"] .ptv-form-field input { color-scheme: dark; }

/* === Подтверждение удаления === */

.ptv-confirm {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-surface);
}

/* === PDF viewer методики === */

.ptv-methodics-modal-overlay .tool-modal {
  height: 90vh;
}
.ptv-methodics-modal-overlay .tool-modal__body {
  padding: 0;
  display: flex;
}

.tool-modal__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.ptv-methodics-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: none;
  background: var(--color-bg);
}

/* css/tools/pensia.css */
/* === Инструмент "Пенсия сотрудника" === */

.main-content:has(.pensia-page) { padding-top: 0; }

.pensia-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pensia-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0 32px;
  container-type: inline-size;
}

/* Калькулятор + информационный блок: 1 колонка по умолчанию,
   2 — при широком контейнере. Рекламный блок вынесен выше. */
.pensia-columns {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@container (min-width: 1000px) {
  .pensia-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
}

/* Таймер в тулбаре */
.pensia-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pensia-toolbar-start {
  white-space: nowrap;
}

.pensia-toolbar-timer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: 17px;
  cursor: pointer;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  transition: background 0.15s;
}
.pensia-toolbar-timer:hover {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.pensia-toolbar-timer__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

.pensia-toolbar-timer__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pensia-toolbar-timer svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.pensia-toolbar-timer--done .pensia-toolbar-timer__value {
  color: var(--color-primary);
}

/* Таймер пенсии в аппбаре (заменяет notice «Сайт в разработке») */
.pensia-header-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}
.pensia-header-timer:hover {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.app-header__notice--pensia {
  padding: 0;
}

/* Калькулятор */
.pensia-calc {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: var(--radius);
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pensia-calc__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  margin: 0 0 8px;
}

.pensia-calc__row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pensia-input-wrap {
  position: relative;
  width: 120px;
  flex-shrink: 0;
}
.pensia-input-wrap--nosuffix { width: 120px; }

.pensia-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  font-size: 15px;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pensia-input-wrap .pensia-input { padding-right: 34px; }
.pensia-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.pensia-input__suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--color-on-surface-secondary);
  pointer-events: none;
}

.pensia-calc__label {
  font-size: 14px;
  color: var(--color-on-surface);
  line-height: 1.25;
  flex: 1 1 auto;
}
.pensia-calc__label--small {
  font-size: 13px;
}
.pensia-calc__label--muted {
  color: color-mix(in srgb, var(--color-primary) 60%, var(--color-on-surface-secondary));
  font-size: 13px;
}

.pensia-calc__hint {
  font-size: 12px;
  color: var(--color-primary);
  line-height: 1.3;
  margin: -4px 0 4px;
}

.pensia-calc__result {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-on-surface);
  text-align: right;
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}

/* Информационная секция */
.pensia-info {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow);
}

.pensia-info__label {
  font-size: 14px;
  color: var(--color-on-surface);
  margin: 0;
}

.pensia-info__accent {
  font-size: 14px;
  color: var(--color-primary);
  margin: 0;
  line-height: 1.4;
}

.pensia-info__law {
  font-size: 13px;
  font-style: italic;
  font-weight: 700;
  color: var(--color-on-surface);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
  user-select: text;
}

/* Модалка настройки таймера */
.pensia-modal .tool-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pensia-modal__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pensia-modal__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-surface);
  line-height: 1.3;
}

.pensia-modal__date,
.pensia-modal__input {
  height: 40px;
  padding: 0 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  font-size: 15px;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  color-scheme: light;
  outline: none;
  box-sizing: border-box;
}
.pensia-modal__date:focus,
.pensia-modal__input:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
[data-theme="dark"] .pensia-modal__date,
[data-theme="dark"] .pensia-modal__input {
  color-scheme: dark;
}
.pensia-modal__input--narrow {
  width: 72px;
  text-align: center;
}

.pensia-modal__inline {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-on-surface);
}

.pensia-modal__stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pensia-modal__stat-line {
  font-size: 13px;
  color: var(--color-primary);
}

.pensia-modal__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-hover);
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  color: var(--color-on-surface);
}

.pensia-ad-slot:empty { display: none; margin: 0; padding: 0; border: 0; }

/* css/tools/otpuska.css */
/* === Инструмент "Отпуск сотрудника" === */

.main-content:has(.otpuska-page) { padding-top: 0; }

.otpuska-page {
  display: flex;
  flex-direction: column;
}

.otpuska-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0 32px;
  container-type: inline-size;
}

/* Калькулятор слева, метод + статьи справа — при широком контейнере */
.otpuska-columns {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.otpuska-columns__left,
.otpuska-columns__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
@container (min-width: 1000px) {
  .otpuska-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
  }
}

/* --- Статус производственного календаря --- */
.otpuska-status {
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  padding: 10px 16px;
  border-radius: var(--radius);
}
.otpuska-status--ok {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.otpuska-status--error {
  color: #F44336;
  background: color-mix(in srgb, #F44336 12%, transparent);
}

/* --- Основная карточка с полями --- */
.otpuska-card {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: var(--radius);
  padding: 16px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.otpuska-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.otpuska-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.35;
}

/* --- Инпуты (паттерн как у pensia) --- */
.otpuska-input {
  width: 100%;
  height: 40px;
  padding: 0 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  font-size: 15px;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  color-scheme: light;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
[data-theme="dark"] .otpuska-input { color-scheme: dark; }
.otpuska-input:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}
.otpuska-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}

.otpuska-input--date {
  max-width: 220px;
  text-align: center;
}

/* Численный инпут с суффиксом (обёртка с абсолютным позиционированием) */
.otpuska-input-wrap {
  position: relative;
  width: 110px;
  flex-shrink: 0;
}
.otpuska-input-wrap .otpuska-input {
  text-align: center;
  padding-right: 30px;
}
/* Убираем стрелки у number input */
.otpuska-input--num::-webkit-inner-spin-button,
.otpuska-input--num::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.otpuska-input--num { -moz-appearance: textfield; }

.otpuska-input__suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  pointer-events: none;
}

.otpuska-numeric-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.otpuska-numeric-hint {
  flex: 1;
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-primary);
}

/* --- Блок результатов --- */
.otpuska-result {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.otpuska-result__main {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-on-surface);
  font-variant-numeric: tabular-nums;
}
.otpuska-result__main b {
  color: var(--color-primary);
}
.otpuska-result__line {
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-on-surface);
}
.otpuska-result__line b {
  font-weight: 700;
}
.otpuska-result__line--secondary {
  color: var(--color-on-surface-secondary);
}

/* --- Аккордеон "Методика расчёта" (compact-card в стиле ПТВ) --- */
.otpuska-method-acc.tool-accordion--card {
  padding: 10px 14px;
}
.otpuska-method-acc .tool-accordion__title {
  font-size: 14px;
  line-height: 1.35;
}
.otpuska-method-acc .tool-accordion__body-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.otpuska-method-intro {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface);
}
.otpuska-method-card {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  transition: background 0.2s, border-color 0.2s;
}
.otpuska-method-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.otpuska-method-card--active {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.otpuska-method-card--active:hover {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.otpuska-method-card__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.otpuska-method-card__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface);
}

/* --- Справочник статей 141-ФЗ (compact-card в стиле ПТВ) --- */
.otpuska-articles-heading {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-surface);
}
.otpuska-articles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.otpuska-article.tool-accordion--card {
  padding: 10px 14px;
}
.otpuska-article .tool-accordion__title {
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-on-surface);
}
.otpuska-article .tool-accordion__body-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.otpuska-article__body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-on-surface);
}

.otpuska-ad-slot:empty { display: none; margin: 0; padding: 0; border: 0; }

/* css/tools/norma.css */
/* === Инструмент "Норма часов" === */

.main-content:has(.norma-page) { padding-top: 0; }

.norma-page {
  display: flex;
  flex-direction: column;
}

.norma-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0 32px;
  container-type: inline-size;
}

/* Настройки + месячные часы: 1 колонка по умолчанию,
   2 — при широком контейнере (settings слева, addHours/absence справа) */
.norma-settings-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@container (min-width: 900px) {
  .norma-settings-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
}

.norma-beta {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-surface-secondary);
  margin-left: 4px;
}

/* --- Статус производственного календаря --- */
.norma-status {
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 16px;
  border-radius: var(--radius);
}
.norma-status--ok {
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.norma-status--error {
  color: #F44336;
  background: color-mix(in srgb, #F44336 12%, transparent);
}

/* --- Объединённый блок (норма/период слева + пикеры справа) под календарём --- */
.norma-range-summary {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.norma-range-summary__left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}
.norma-range-summary__right {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.norma-range-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.norma-range-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.norma-range-picker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  height: 36px;
  padding: 0 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.norma-range-picker:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}
.norma-range-picker__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-surface);
  pointer-events: none;
}
.norma-range-picker__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
  color-scheme: light;
}
[data-theme="dark"] .norma-range-picker__input { color-scheme: dark; }

/* --- Переключатель вида (3 мес / 6 мес / год) --- */
.norma-view-tabs {
  margin-top: 4px;
}

/* --- Шапка календаря с навигацией --- */
.norma-cal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.norma-cal-nav {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.norma-cal-nav:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.norma-cal-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-on-surface);
}

/* --- Общий контейнер календаря --- */
.norma-cal {
  padding: 0;
}

/* --- Сетка месяцев (3/6/12) --- */
.norma-multi {
  display: grid;
  gap: 14px;
}
.norma-multi--3 {
  grid-template-columns: repeat(3, 1fr);
}
.norma-multi--6 {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.norma-multi--12 {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* --- Мини-блок месяца --- */
.norma-mini {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px;
}
.norma-multi--6 .norma-mini {
  padding: 6px;
}
.norma-multi--12 .norma-mini {
  padding: 4px;
}
.norma-mini__header {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
  color: var(--color-on-surface);
  text-transform: capitalize;
}
.norma-multi--6 .norma-mini__header,
.norma-multi--12 .norma-mini__header {
  font-size: 12px;
  margin-bottom: 4px;
}

.norma-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}
.norma-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  padding: 2px 0;
}
.norma-weekday--weekend {
  color: #F44336;
}
.norma-multi--6 .norma-weekday,
.norma-multi--12 .norma-weekday {
  font-size: 10px;
}

.norma-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

/* --- Ячейка дня (портирована из Flutter dayStyledWidget) --- */
.norma-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  transition: transform 0.05s, background 0.15s;
}
.norma-multi--12 .norma-day {
  border-radius: 3px;
}
.norma-day--outside {
  cursor: default;
  pointer-events: none;
}
.norma-day--outside .norma-day__num {
  color: var(--color-on-surface-secondary);
  opacity: 0.25;
}
.norma-day:hover:not(.norma-day--outside) .norma-day__circle {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.norma-day:active:not(.norma-day--outside) {
  transform: scale(0.93);
}

.norma-day__circle {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color 0.15s, background 0.15s;
}
.norma-multi--12 .norma-day__circle {
  width: 26px;
  height: 26px;
}

.norma-day__num {
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}
.norma-multi--12 .norma-day__num {
  font-size: 12px;
}

/* Отметка "сегодня" */
.norma-day--today .norma-day__num {
  font-weight: 800;
  color: var(--color-primary);
}

/* Выделенный день — полностью выделенный контейнер с закруглёнными краями.
   В режиме "Год" (.norma-multi--12) радиус закругления в два раза меньше. */
.norma-day--selected {
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.norma-day--selected .norma-day__circle {
  border-color: transparent;
  background: transparent;
}
.norma-day--selected .norma-day__num {
  color: var(--color-primary);
  font-weight: 800;
}

/* Соседние выделенные дни в одном ряду склеиваются без скруглений между ними.
   Исключаем переход с воскресенья на понедельник (границы недельных рядов). */
.norma-day--selected + .norma-day--selected:not(:nth-child(7n+1)) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.norma-day--selected:has(+ .norma-day--selected):not(:nth-child(7n)) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Выделенные дни, стоящие вертикально друг под другом (через 7 ячеек в сетке),
   склеиваются без горизонтальных скруглений между ними. */
.norma-day--selected
  + .norma-day + .norma-day + .norma-day + .norma-day + .norma-day + .norma-day
  + .norma-day--selected {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.norma-day--selected:has(
  + .norma-day + .norma-day + .norma-day + .norma-day + .norma-day + .norma-day
  + .norma-day--selected
) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Часы (производственный календарь) — в правом нижнем углу */
.norma-day__hours {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 10px;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.norma-day__hours--dim {
  opacity: 0.5;
}
.norma-multi--12 .norma-day__hours {
  font-size: 9px;
  bottom: 1px;
  right: 2px;
}

/* --- Блок результатов (снизу) --- */
.norma-result-bottom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: var(--radius);
}
.norma-result-line {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-surface);
}
.norma-result-line__label {
  color: var(--color-on-surface);
}
.norma-result-line b {
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.norma-result-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-on-surface-secondary);
}

/* --- Карточка настроек (norma / weekNorma / holidays) --- */
.norma-settings-card {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.norma-settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.norma-settings-hint {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-primary);
}

/* --- Инпут с суффиксом --- */
.norma-input-wrap {
  position: relative;
  width: 110px;
  flex-shrink: 0;
}
.norma-input {
  width: 100%;
  height: 40px;
  padding: 0 30px 0 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  font-size: 15px;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  outline: none;
  box-sizing: border-box;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.norma-input:hover {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}
.norma-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.norma-input__suffix {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  pointer-events: none;
}

/* --- Тумблер "праздники в переработку" --- */
.norma-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  text-align: left;
}
.norma-toggle__track {
  position: relative;
  width: 42px;
  height: 24px;
  background: color-mix(in srgb, var(--color-on-surface-secondary) 30%, transparent);
  border-radius: 999px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.norma-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s;
}
.norma-toggle--on .norma-toggle__track {
  background: #4CAF50;
}
.norma-toggle--on .norma-toggle__thumb {
  transform: translateX(18px);
}
.norma-toggle__label {
  font-size: 14px;
  line-height: 1.35;
}

/* --- Подсказка между блоками --- */
.norma-hint {
  text-align: center;
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  padding: 4px 0;
}

/* --- add/absence hours за месяц --- */
.norma-month-hours {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: var(--radius);
  padding: 16px 20px;
}

/* --- Кнопка "Очистить все дни" в toolbar (danger outline) --- */
.norma-btn-clear[hidden] {
  display: none;
}
.norma-btn-clear {
  border-color: color-mix(in srgb, #F44336 45%, transparent);
  color: color-mix(in srgb, #F44336 70%, transparent);
}
.norma-btn-clear:hover:not([disabled]):not(.btn--disabled) {
  background: color-mix(in srgb, #F44336 12%, transparent);
  border-color: #F44336;
  color: #F44336;
}

/* --- Кнопки --- */
.norma-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-primary);
}
.norma-btn--danger {
  border-color: #F44336;
  color: #F44336;
  background: var(--color-surface);
}
.norma-btn--danger:hover {
  background: color-mix(in srgb, #F44336 12%, var(--color-surface));
}
.norma-btn--ghost {
  color: var(--color-on-surface-secondary);
}
.norma-btn--ghost:hover {
  background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}
.norma-btn--disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* --- Модалки (Отметить смены / Очистить) --- */
.norma-modal .tool-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.norma-modal-intro {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-surface);
}
.norma-modal-subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.norma-teams-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.norma-team-btn {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--team-color) 18%, transparent);
  border: 2px solid color-mix(in srgb, var(--team-color) 60%, transparent);
  border-radius: 50%;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-on-surface);
  transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.norma-team-btn:hover {
  background: color-mix(in srgb, var(--team-color) 28%, transparent);
}
.norma-team-btn--active {
  background: var(--team-color);
  border-color: var(--team-color);
  color: #fff;
  transform: scale(1.05);
}
[data-theme="dark"] .norma-team-btn--active {
  color: #000;
}
.norma-period-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.norma-period-btn {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-on-surface);
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.norma-period-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}

/* css/tools/articles.css */
/* === Статьи === */

.main-content:has(.articles-page) { padding-top: 0; }

.articles-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 0 40px;
}

.articles-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 4px;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 5;
  border-bottom: 1px solid var(--color-border);
}

.articles-toolbar__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-on-surface);
  flex-shrink: 0;
}

.articles-toolbar__title--ellipsis {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 15px;
  font-weight: 500;
}

.articles-toolbar__search-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
}

.articles-toolbar__search {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-on-surface);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.articles-toolbar__search::placeholder {
  color: var(--color-on-surface-secondary);
}

.articles-toolbar__search:focus {
  border-color: var(--color-primary);
}

.articles-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--color-on-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.articles-toolbar__btn:hover {
  color: var(--color-primary);
}

.articles-toolbar__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.articles-toolbar__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 12px 0 6px;
  background: transparent;
  color: var(--color-on-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}

.articles-toolbar__back:hover {
  color: var(--color-primary);
  background: var(--color-hover);
}

.articles-body {
  padding: 16px 0 0;
}

.articles-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
}

.articles-state--error {
  color: #c62828;
}

.articles-state__retry {
  margin-top: 12px;
  padding: 6px 16px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

.articles__mark {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}


/* === Сетка карточек === */

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
  width: 100%;
}

.articles-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s, box-shadow 0.15s;
}

.articles-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.articles-card--no-image {
  background-image: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 60%, #000));
}

.articles-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  color: #fff;
  /* Повторяем мобильный градиент: прозрачный сверху → плотный у низа,
     чтобы текст читался даже на светлом фоне обложки. */
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.05) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0.72) 100%);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.articles-card__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.articles-card__short {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.articles-card__footer {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.articles-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: 11px;
  color: #fff;
}

.articles-card__meta-label {
  color: rgba(255, 255, 255, 0.65);
}

.articles-card__author,
.articles-card__date {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.articles-card__stats {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
}

.articles-card__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* === Детальный просмотр === */

.articles-detail {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 4px;
}

.articles-detail__hero {
  aspect-ratio: 16 / 7;
  background-color: var(--color-hover);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-md, 12px);
  margin-top: 8px;
}

.articles-detail__header {
  padding: 20px 4px 16px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 20px;
}

.articles-detail__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-on-surface);
  margin: 0 0 12px;
}

.articles-detail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--color-on-surface-secondary);
}

.articles-detail__author {
  font-weight: 600;
  color: var(--color-on-surface);
}

.articles-detail__views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.articles-detail__like {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  color: var(--color-on-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-left: auto;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.articles-detail__like:hover {
  color: #e53935;
  border-color: color-mix(in srgb, #e53935 40%, var(--color-border));
}

.articles-detail__like--on {
  color: #e53935;
  border-color: color-mix(in srgb, #e53935 50%, var(--color-border));
  background: color-mix(in srgb, #e53935 8%, transparent);
}

.articles-detail__content {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-on-surface);
  padding-bottom: 40px;
}

/* Quill Delta content */
.ql-view p,
.ql-view h1,
.ql-view h2,
.ql-view h3,
.ql-view h4,
.ql-view h5,
.ql-view h6,
.ql-view ul,
.ql-view ol,
.ql-view blockquote,
.ql-view pre {
  margin: 0 0 16px;
}

.ql-view h1 { font-size: 26px; font-weight: 700; line-height: 1.25; }
.ql-view h2 { font-size: 22px; font-weight: 700; line-height: 1.3; }
.ql-view h3 { font-size: 19px; font-weight: 600; line-height: 1.35; }
.ql-view h4 { font-size: 17px; font-weight: 600; }

.ql-view ul,
.ql-view ol {
  padding-left: 24px;
}

.ql-view li {
  margin-bottom: 6px;
}

.ql-view blockquote {
  padding: 8px 16px;
  border-left: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  color: var(--color-on-surface-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ql-view pre {
  padding: 12px 16px;
  background: var(--color-hover);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  overflow-x: auto;
}

.ql-view code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  padding: 1px 6px;
  background: var(--color-hover);
  border-radius: 4px;
}

.ql-view pre code {
  padding: 0;
  background: transparent;
}

.ql-view a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ql-view .ql-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  margin: 12px auto;
}

.ql-view .ql-empty {
  height: 12px;
  margin: 0;
}


/* === Статьи: кнопка "Новая статья" в тулбаре === */

.articles-toolbar__create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.articles-toolbar__create:hover { opacity: 0.9; }

[data-theme="dark"] .articles-toolbar__create { color: #000; }

.articles-toolbar__btn--danger {
  color: #c62828;
}

.articles-toolbar__btn--danger:hover {
  color: #fff;
  background: #c62828;
  border-color: #c62828;
}


/* === Статьи: редактор === */

.main-content:has(.articles-page--editor) { padding-top: 0; }

.articles-editor-tabs {
  display: inline-flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.articles-editor-tab {
  height: 32px;
  padding: 0 14px;
  background: transparent;
  color: var(--color-on-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.articles-editor-tab:hover {
  color: var(--color-primary);
}

.articles-editor-tab--active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

[data-theme="dark"] .articles-editor-tab--active {
  color: #000;
}

.articles-editor {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0 160px;
}

.articles-editor__error {
  padding: 12px 16px;
  background: color-mix(in srgb, #c62828 10%, transparent);
  border: 1px solid color-mix(in srgb, #c62828 40%, transparent);
  color: #c62828;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.articles-editor__pane {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.articles-editor__pane--hidden {
  display: none;
}

.articles-editor__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.articles-editor__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-on-surface-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.articles-editor__input {
  width: 100%;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--color-on-surface);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.articles-editor__input:focus {
  border-color: var(--color-primary);
}

.articles-editor__textarea {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
}

.articles-editor__input--error {
  border-color: #c62828;
}

.articles-editor__field-error {
  color: #c62828;
  font-size: 12px;
}

.articles-editor__cover-btn {
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  color: var(--color-on-surface);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.articles-editor__cover-btn:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.articles-editor__preview-label {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}

.articles-editor__preview {
  aspect-ratio: 16 / 9;
  max-height: 320px;
  padding: 20px;
  border-radius: var(--radius-md, 12px);
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.articles-editor__preview-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
}

.articles-editor__preview-short {
  font-size: 14px;
  line-height: 1.3;
  opacity: 0.95;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.articles-editor__preview-meta {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  opacity: 0.85;
}

.articles-editor-quill-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.articles-editor-quill-wrap .ql-toolbar {
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.articles-editor-quill-wrap .ql-container {
  border: none;
  font-family: inherit;
  font-size: 15px;
  min-height: 420px;
}

.articles-editor-quill-wrap .ql-editor {
  min-height: 420px;
  color: var(--color-on-surface);
}

.articles-editor-quill-wrap .ql-editor.ql-blank::before {
  color: var(--color-on-surface-secondary);
  font-style: normal;
  opacity: 0.6;
}

.articles-editor__input::placeholder,
.articles-editor__textarea::placeholder {
  color: var(--color-on-surface-secondary);
  opacity: 0.6;
}

[data-theme="dark"] .articles-editor-quill-wrap .ql-editor.ql-blank::before {
  color: var(--color-on-surface-secondary);
  opacity: 0.75;
}

[data-theme="dark"] .articles-editor__input::placeholder,
[data-theme="dark"] .articles-editor__textarea::placeholder {
  color: var(--color-on-surface-secondary);
  opacity: 0.75;
}

[data-theme="dark"] .articles-editor-quill-wrap .ql-snow .ql-stroke { stroke: var(--color-on-surface); }
[data-theme="dark"] .articles-editor-quill-wrap .ql-snow .ql-fill { fill: var(--color-on-surface); }
[data-theme="dark"] .articles-editor-quill-wrap .ql-snow .ql-picker { color: var(--color-on-surface); }
[data-theme="dark"] .articles-editor-quill-wrap .ql-snow .ql-picker-options {
  background: var(--color-surface);
  border-color: var(--color-border);
}
[data-theme="dark"] .articles-editor-quill-wrap .ql-snow .ql-tooltip {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-on-surface);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .articles-editor-quill-wrap .ql-snow .ql-tooltip input[type=text] {
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-on-surface);
}

.articles-editor__footer {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.articles-editor__btn {
  flex: 1;
  padding: 12px 24px;
  border: none;
  border-radius: 100px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, opacity 0.15s;
}

.articles-editor__btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.articles-editor__btn--primary {
  background: var(--color-primary);
  color: #fff;
}

[data-theme="dark"] .articles-editor__btn--primary {
  color: #000;
}

.articles-editor__btn--primary:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.articles-editor__btn--danger {
  background: #c62828;
  color: #fff;
  flex: 0 0 auto;
  padding: 12px 20px;
}

/* css/tools/market.css */
/* === Объявления === */

.main-content:has(.market-page) { padding-top: 0; }

.market-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 0 40px;
}

/* === Toolbar === */
.market-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 4px;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  z-index: 5;
  border-bottom: 1px solid var(--color-border);
}

.market-toolbar__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-on-surface);
  flex-shrink: 0;
}

.market-toolbar__search-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
}

.market-toolbar__search {
  width: 100%;
  height: 32px;
  padding: 0 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-on-surface);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.market-toolbar__search:focus { border-color: var(--color-primary); }

.market-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  color: var(--color-on-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.market-toolbar__btn:hover { color: var(--color-primary); }
.market-toolbar__btn:disabled { opacity: 0.5; cursor: default; }

.market-toolbar__create {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s;
  flex-shrink: 0;
}
.market-toolbar__create:hover { filter: brightness(1.1); }
[data-theme="dark"] .market-toolbar__create { color: #000; }

/* === Body / state === */
.market-body { padding: 16px 0 0; }

.market-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
}
.market-state--error { color: #c62828; }
.market-state__retry {
  margin-top: 12px;
  padding: 6px 16px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}

/* === Сетка карточек === */
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
  width: 100%;
}

.market-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 12px);
  padding: 14px;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s, transform 0.15s;
}
.market-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.market-card--pin {
  border-color: #2e7d32;
  background: color-mix(in srgb, #2e7d32 6%, var(--color-surface));
}
.market-card--moderation { opacity: 0.7; }

.market-card__pin {
  position: absolute;
  top: -10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #2e7d32;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.market-card__pin svg { width: 12px; height: 12px; }

.market-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.market-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-on-surface);
  line-height: 1.3;
}
.market-card__date {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  white-space: nowrap;
}

.market-card__images {
  display: flex;
  gap: 8px;
  overflow: hidden;
  /* Горизонтальный скролл отключён: картинки, которые не помещаются по
     ширине карточки, обрезаются. Клик по любой видимой открывает лайтбокс
     со всеми фото и навигацией стрелками. */
  margin: 0 -14px;
  padding: 0 14px;
}
.market-card__image {
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  padding: 0;
  border: none;
  background: color-mix(in srgb, var(--color-on-surface) 5%, transparent);
  border-radius: var(--radius-sm);
  cursor: zoom-in;
  overflow: hidden;
  transition: transform 0.15s;
}
.market-card__image:hover { transform: scale(1.02); }
.market-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.market-card__price {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}

.market-card__desc-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.market-card__desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-surface);
  white-space: pre-wrap;
  word-break: break-word;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.market-card__desc-wrap--expanded .market-card__desc {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.market-card__desc-toggle {
  margin-top: 4px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.market-card__desc-toggle:hover { text-decoration: underline; }

.market-card__address {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.market-card__address-icon { color: var(--color-primary); display: inline-flex; }

.market-card__contacts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 6px;
  border-top: 1px dashed var(--color-border);
}
.market-card__contacts-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  margin-bottom: 2px;
}

.market-card__phone,
.market-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 4px 0;
  color: var(--color-primary);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  word-break: break-all;
}
.market-card__phone:hover,
.market-card__link--anchor:hover { text-decoration: underline; }
.market-card__phone-icon,
.market-card__address-icon,
.market-card__link-icon { display: inline-flex; flex-shrink: 0; }

.market-card__moderation {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}

.market-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}
.market-card__footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.market-card__date--footer {
  display: inline-block;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-on-surface-secondary);
  padding: 3px 8px;
  border-radius: 100px;
  font-size: 12px;
  white-space: nowrap;
}
.market-card__actions {
  display: flex;
  gap: 4px;
}
.market-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  font-size: 14px;
}
.market-card__btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.market-card__btn--danger:hover {
  color: #c62828;
  border-color: #c62828;
}
.market-card__views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-on-surface-secondary);
  font-size: 12px;
}
.market-card__views-icon { display: inline-flex; }
.market-card--pin .market-card__views { color: #2e7d32; }

/* === Лайтбокс === */
#market-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
}
.market-lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.market-lightbox__img {
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  cursor: default;
  border-radius: 8px;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5);
}
.market-lightbox__close,
.market-lightbox__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.market-lightbox__close:hover,
.market-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.25);
}
.market-lightbox__close {
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
}
.market-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
}
.market-lightbox__nav--prev { left: 16px; }
.market-lightbox__nav--next { right: 16px; }
.market-lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 13px;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 12px;
  border-radius: 100px;
}

/* === Редактор (модалка) === */
.market-editor__body { display: flex; flex-direction: column; gap: 4px; }

.market-editor__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 12px;
  margin-bottom: 4px;
}
.market-editor__label:first-child { margin-top: 0; }

.market-editor__input {
  width: 100%;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-on-surface);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.market-editor__input:focus { border-color: var(--color-primary); }
.market-editor__input--error { border-color: #c62828; }

.market-editor__textarea {
  resize: vertical;
  min-height: 100px;
  line-height: 1.5;
}

.market-editor__field-error {
  color: #c62828;
  font-size: 12px;
  margin-top: 4px;
}

.market-editor__files {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.market-editor__file {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.market-editor__file img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.market-editor__file-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.market-editor__file-remove svg { width: 14px; height: 14px; }
.market-editor__file-add {
  width: 90px;
  height: 90px;
  border: 1px dashed var(--color-primary);
  color: var(--color-primary);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.market-editor__file-add:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.market-editor__file-add-icon svg { width: 24px; height: 24px; }

.market-editor__contacts {
  margin-top: 16px;
  padding: 12px;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: var(--radius-sm);
}
.market-editor__contacts-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-surface);
}
.market-editor__contacts-sub {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  margin-bottom: 4px;
}

/* === Правила (через bodyHtml в pcAlert) === */
.market-rules { font-size: 14px; line-height: 1.55; color: var(--color-on-surface); }
.market-rules p { margin: 0 0 8px; }
.market-rules ul { margin: 0 0 12px; padding-left: 22px; }
.market-rules li { margin-bottom: 2px; }
.market-rules__warn {
  margin-top: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-weight: 500;
}


/* === Платные кнопки продвижения (pin/boost) — порт из Flutter market.dart:1043-1108 === */
.market-card__promote {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-family);
  cursor: pointer;
  color: #fff;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
  transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
}
.market-card__promote:hover { filter: brightness(1.06); box-shadow: 0 2px 6px rgba(0,0,0,0.18); }
.market-card__promote:active { transform: translateY(1px); }
.market-card__promote svg { display: block; flex-shrink: 0; }
.market-card__promote--pin   { background: linear-gradient(135deg, #4CAF50 0%, #2E7D32 100%); }
.market-card__promote--boost { background: linear-gradient(135deg, #FB8C00 0%, #E65100 100%); }

/* === Попап продвижения === */
#market-promote-overlay .tool-modal {
  max-width: 480px;
  width: 100%;
}

.market-promote__header {
  background: color-mix(in srgb, var(--promote-accent, #2E7D32) 22%, var(--color-surface));
}

.market-promote__body {
  padding: 16px 20px 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.market-promote__heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-on-surface);
  text-align: center;
  line-height: 1.4;
}

.market-promote__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.market-promote__bullet {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--promote-accent, #2E7D32) 8%, transparent);
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-on-surface);
}
.market-promote__bullet-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--promote-accent, #2E7D32);
}
.market-promote__bullet-icon svg { display: block; }
.market-promote__bullet-text { min-width: 0; }

.market-promote__price {
  text-align: center;
  font-size: 15px;
  color: var(--color-on-surface);
  padding-top: 4px;
}
.market-promote__price b {
  font-size: 22px;
  color: var(--promote-accent, #2E7D32);
  font-weight: 800;
  margin-left: 4px;
}

.market-promote__next {
  background: var(--promote-accent, #2E7D32) !important;
  color: #fff !important;
}
[data-theme="dark"] .market-promote__next { color: #fff !important; }
.market-promote__next:hover:not(:disabled) {
  background: var(--promote-accent-hover, #1B5E20) !important;
  filter: none;
}

/* === Счётчик просмотров (кнопка для автора/owner) === */
.market-card__views--clickable {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  font-family: var(--font-family);
  transition: background 0.15s;
}
.market-card__views--clickable:hover {
  background: var(--color-hover);
}

/* === Тултип со статистикой объявления === */
.market-stats-tooltip {
  position: fixed;
  z-index: 1100;
  min-width: 220px;
  padding: 10px 12px;
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  font-size: 13px;
  line-height: 1.4;
  animation: market-stats-in 0.15s ease-out;
}
@keyframes market-stats-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.market-stats-tooltip::before {
  content: '';
  position: absolute;
  left: var(--arrow-left, 50%);
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
  margin-left: -5px;
}
.market-stats-tooltip[data-arrow="bottom"]::before {
  bottom: -5px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.market-stats-tooltip[data-arrow="top"]::before {
  top: -5px;
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
}
.market-stats-tooltip__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 3px 0;
}
.market-stats-tooltip__label {
  color: var(--color-on-surface-secondary);
}
.market-stats-tooltip b {
  font-weight: 700;
  color: var(--color-on-surface);
}

/* === Рекламная карточка в сетке market === */
/* Обычная .market-card задаёт рамку/фон/радиус, .market-card--ad их
   переопределяет под пустой слот под РСЯ. Формой повторяет обычные карточки,
   чтобы grid-колонки выровнялись. */
.market-card--ad {
  padding: 0;
  overflow: hidden;
  min-height: 200px;
  justify-content: center;
  align-items: stretch;
  border: 1px dashed var(--color-border);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  box-shadow: none;
}
.market-card--ad:hover { box-shadow: none; transform: none; }
.market-card--ad .yandex-ad {
  margin: 0;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.market-card--ad .yandex-ad__slot {
  width: 100%;
  min-height: 180px;
}
.market-card--ad .yandex-ad__slot--placeholder {
  padding: 16px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}
.yandex-ad__placeholder-title { font-weight: 600; color: var(--color-on-surface); }
.yandex-ad__placeholder-sub { font-size: 11px; opacity: 0.7; }

/* css/tools/tests.css */
/* === Инструмент "Тесты" === */

.main-content:has(.tests-page) { padding-top: 0; }

.tests-page {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.tests-page__inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 16px 0 60px;
}

.tests-toolbar__search {
  min-width: 0;
  width: 100%;
  max-width: 480px;
  justify-self: end;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-on-surface);
  font-size: 13px;
  padding: 6px 12px;
  outline: none;
  transition: border-color 0.15s;
}
.tests-toolbar__search:focus {
  border-color: var(--color-primary);
}
.tests-toolbar__timer {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 16px;
  color: var(--color-primary);
  padding: 4px 12px;
  background: var(--color-primary-light);
  border-radius: 999px;
  transition: background 0.2s, color 0.2s;
}
.tests-toolbar__timer--danger {
  color: #fff;
  background: #c62828;
  animation: tests-timer-pulse 1s ease-in-out infinite;
}
@keyframes tests-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.tests-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tests-section__header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.tests-section__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-on-surface);
}
.tests-section__hint {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}

.tests-empty {
  padding: 24px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  border: 1px dashed var(--color-border);
  border-radius: 14px;
  font-size: 14px;
}
.tests-empty--error {
  color: #c62828;
  border-color: color-mix(in srgb, #c62828 40%, var(--color-border));
  background: color-mix(in srgb, #c62828 6%, transparent);
}

.tests-tabs {
  margin-bottom: 4px;
}

/* --- Сетка категорий (встроенные тесты) --- */
.tests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.tests-card {
  position: relative;
  height: 110px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--color-border);
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  text-align: left;
  color: inherit;
  font: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.tests-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.tests-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-surface) 94%, transparent) 0%,
    color-mix(in srgb, var(--color-surface) 80%, transparent) 50%,
    color-mix(in srgb, var(--color-surface) 40%, transparent) 100%
  );
  pointer-events: none;
}
.tests-card__body {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  color: var(--color-on-surface);
}
.tests-card__title {
  font-size: 16px;
  font-weight: 700;
  text-shadow: 0 1px 2px color-mix(in srgb, var(--color-surface) 40%, transparent);
}
.tests-card__meta {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
}
.tests-card__stats {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  margin-top: 2px;
}
.tests-card__trophy {
  color: var(--color-primary);
  font-weight: 600;
}
.tests-card__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  z-index: 1;
}
[data-theme="dark"] .tests-card__badge { color: #000; }

/* --- Список пользовательских тестов --- */
.tests-custom-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}
.tests-custom-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.tests-custom-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
}
.tests-custom-card--loading {
  opacity: 0.6;
  pointer-events: none;
}
.tests-custom-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.tests-custom-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.tests-custom-card__badge {
  flex-shrink: 0;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.tests-custom-card__author,
.tests-custom-card__desc,
.tests-custom-card__stats {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}
.tests-custom-card__desc {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tests-custom-card__flags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.tests-custom-card__flag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.tests-custom-card__flag--locked {
  background: color-mix(in srgb, #c62828 16%, transparent);
  color: #c62828;
}
.tests-custom-card--locked {
  opacity: 0.7;
  cursor: not-allowed;
}
.tests-custom-card--locked:hover {
  transform: none;
  border-color: var(--color-border);
}
.tests-custom-card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
.tests-custom-card__actions {
  position: absolute;
  top: 10px;
  right: 12px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.tests-custom-card { position: relative; }
.tests-card-action {
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  border: 1px solid var(--color-border);
  color: var(--color-on-surface-secondary);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tests-card-action:hover {
  background: var(--color-hover);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.tests-card-action--danger:hover {
  color: #c62828;
  border-color: #c62828;
}
.tests-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.15s;
}
.tests-create-btn:hover { opacity: 0.9; }
[data-theme="dark"] .tests-create-btn { color: #000; }

/* --- Редактор пользовательских тестов --- */
.tests-editor-modal .tool-modal__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tests-editor__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tests-editor__field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
}
.tests-editor__field input[type="text"],
.tests-editor__field input[type="number"],
.tests-editor__field textarea {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--color-on-surface);
  font: inherit;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.tests-editor__field input:focus,
.tests-editor__field textarea:focus {
  border-color: var(--color-primary);
}
.tests-editor__field textarea { resize: vertical; min-height: 60px; }
.tests-editor__field--inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.tests-editor__field--inline label { margin: 0; }
.tests-editor__field--inline input[type="number"] {
  width: 120px;
}
.tests-editor__row {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tests-editor__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-on-surface);
  cursor: pointer;
}
.tests-editor__checkbox input { accent-color: var(--color-primary); width: 18px; height: 18px; }
.tests-editor__themes-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
}
.tests-editor__themes-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-surface);
}
.tests-editor__empty {
  padding: 16px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 13px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
.tests-editor__empty--error { color: #c62828; }
.tests-editor__themes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tests-editor__theme-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tests-editor__theme-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tests-editor__theme-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.tests-editor__theme-mode {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.tests-editor__radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-on-surface);
  cursor: pointer;
}
.tests-editor__radio input { accent-color: var(--color-primary); }
.tests-editor__theme-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.tests-editor__theme-picked {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
}
.tests-editor__theme-summary {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  border-top: 1px dashed var(--color-border);
  padding-top: 8px;
}
.tests-editor__own-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tests-editor__own-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  align-items: flex-start;
}
.tests-editor__own-text {
  flex: 1;
  font-size: 13px;
  color: var(--color-on-surface);
  line-height: 1.35;
}
.tests-editor__own-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.tests-editor__pick-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--color-on-surface);
  cursor: pointer;
  font: inherit;
  margin-bottom: 8px;
  width: 100%;
}
.tests-editor__pick-row:hover {
  border-color: var(--color-primary);
  background: var(--color-hover);
}
.tests-editor__pick-meta {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}
.tests-editor__qrow {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
  margin-bottom: 8px;
  align-items: flex-start;
}
.tests-editor__qrow:hover { border-color: var(--color-primary); }
.tests-editor__qrow--checked {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: var(--color-primary);
}
.tests-editor__qrow input { accent-color: var(--color-primary); margin-top: 3px; }
.tests-editor__qrow-text { flex: 1; font-size: 13px; color: var(--color-on-surface); line-height: 1.35; }
.tests-editor__qrow-right {
  margin-top: 4px;
  font-size: 12px;
  color: var(--color-primary);
  font-weight: 600;
}

/* --- Стартовый экран теста --- */
.tests-intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
  padding: 20px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
}
.tests-intro__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-on-surface);
  margin: 0;
}
.tests-intro__subtitle {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 6px 0 0;
}
.tests-intro__description {
  font-size: 14px;
  color: var(--color-on-surface);
  line-height: 1.5;
}
.tests-intro__author {
  font-size: 12px;
  color: var(--color-primary);
}
.tests-intro__meta {
  font-size: 14px;
  color: var(--color-on-surface);
  line-height: 1.6;
}
.tests-intro__best {
  color: var(--color-primary);
  font-weight: 700;
}
.tests-intro__list,
.tests-intro__themes {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--color-on-surface);
  line-height: 1.5;
}
.tests-intro__total {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.tests-intro__notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}
.tests-intro__notice--info {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  border: 1px solid var(--color-primary);
  color: var(--color-on-surface);
}
.tests-intro__notice--info svg {
  color: var(--color-primary);
  flex-shrink: 0;
}
.tests-intro__notice--warn {
  background: color-mix(in srgb, #ffb300 18%, transparent);
  border: 1px solid #ffb300;
  color: var(--color-on-surface);
}
.tests-intro__notice--warn svg {
  color: #c77700;
  flex-shrink: 0;
}
.tests-intro__stats {
  font-size: 13px;
  color: var(--color-primary);
}
.tests-intro__ready {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-top: 4px;
}
.tests-intro__loading {
  padding: 16px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
  font-size: 13px;
}
.tests-intro__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.tests-intro__start {
  width: 100%;
  padding: 14px 20px;
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
  border: 1px solid var(--color-primary);
  border-radius: 12px;
  color: var(--color-primary);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.tests-intro__start:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary) 28%, transparent);
  transform: translateY(-1px);
}
.tests-intro__start--disabled,
.tests-intro__start:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.tests-intro__warning {
  text-align: center;
  font-size: 12px;
  color: var(--color-primary);
}
.tests-intro__error {
  text-align: center;
  font-size: 12px;
  color: #c62828;
}

/* --- Сессия прохождения --- */
.tests-session {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
}
.tests-session__dots {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 4px 0 8px;
}
.tests-session__dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  background: transparent;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.tests-session__dot--current {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 16%, transparent);
  transform: scale(1.15);
}
.tests-session__dot--correct {
  background: #2e7d32;
  border-color: #2e7d32;
}
.tests-session__dot--wrong {
  background: #c62828;
  border-color: #c62828;
}
.tests-session__dot-connector {
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--color-primary) 30%, transparent);
  min-width: 4px;
}
.tests-session__dot-connector--done {
  background: color-mix(in srgb, var(--color-primary) 100%, transparent);
}
.tests-session__theme {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tests-session__question {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-on-surface);
}
.tests-session__image {
  max-width: 100%;
  max-height: 360px;
  border-radius: 14px;
  object-fit: contain;
  background: var(--color-surface);
}
.tests-session__answers {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.tests-session__answer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  cursor: pointer;
  color: var(--color-on-surface);
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.tests-session__answer:hover:not(:disabled) {
  border-color: var(--color-primary);
  background: var(--color-hover);
}
.tests-session__answer:disabled {
  cursor: default;
}
.tests-session__answer-letter {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 12px;
}
.tests-session__answer-text {
  flex: 1;
}
.tests-session__answer--correct {
  border-color: #2e7d32;
  background: color-mix(in srgb, #4caf50 18%, transparent);
}
.tests-session__answer--correct .tests-session__answer-letter {
  background: #2e7d32;
  color: #fff;
}
.tests-session__answer--wrong {
  border-color: #c62828;
  background: color-mix(in srgb, #f44336 18%, transparent);
}
.tests-session__answer--wrong .tests-session__answer-letter {
  background: #c62828;
  color: #fff;
}

/* --- Экран результатов --- */
.tests-results {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 820px;
}
.tests-results__test-title {
  font-size: 14px;
  color: var(--color-on-surface-secondary);
}
.tests-results__score-row {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  flex-wrap: wrap;
}
.tests-results__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 12px 20px;
  background: var(--color-primary-light);
  border-radius: 14px;
}
.tests-results__score-value {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.tests-results__score-max {
  font-size: 12px;
  color: var(--color-primary);
  opacity: 0.8;
  margin-top: 4px;
}
.tests-results__stats {
  flex: 1;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-on-surface);
}
.tests-results__stats span {
  color: var(--color-on-surface-secondary);
  margin-right: 6px;
}
.tests-results__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tests-results__btn {
  padding: 10px 18px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-on-surface);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tests-results__btn:hover {
  background: var(--color-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.tests-results__btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.tests-results__btn--primary:hover {
  background: color-mix(in srgb, var(--color-primary) 85%, black);
  color: #fff;
}
[data-theme="dark"] .tests-results__btn--primary,
[data-theme="dark"] .tests-results__btn--primary:hover {
  color: #0a0a0a;
}

.tests-results__review {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.tests-results__review-item {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.4;
}
.tests-results__review-item--correct {
  border-left: 4px solid #2e7d32;
}
.tests-results__review-item--wrong {
  border-left: 4px solid #c62828;
}
.tests-results__review-q {
  font-weight: 600;
  color: var(--color-on-surface);
}
.tests-results__review-theme {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.tests-results__review-a {
  color: var(--color-on-surface);
}
.tests-results__review-a span {
  color: var(--color-on-surface-secondary);
}
.tests-results__review-a--right {
  color: #2e7d32;
}

/* --- Таблица лидеров --- */
.tests-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  max-width: 640px;
}
.tests-leaderboard__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-surface);
}
.tests-leaderboard__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tests-leaderboard__table th,
.tests-leaderboard__table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-on-surface);
}
.tests-leaderboard__table th {
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.tests-leaderboard__table tr:last-child td {
  border-bottom: none;
}
.tests-leaderboard__hint {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  font-style: italic;
}

/* css/tools/staff.css */
/* === Инструмент "Личный состав" === */

.main-content:has(.staff-page) { padding: 0 8px var(--global-ad-safe-bottom); }

.staff-page {
  display: flex;
  flex-direction: column;
}
.staff-toolbar__count {
  color: var(--color-on-surface-secondary);
  font-weight: 500;
  margin-left: 4px;
}
.staff-team-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 4px 8px;
  position: sticky;
  top: 48px;
  background: var(--color-bg);
  z-index: 4;
  border-bottom: 1px solid var(--color-border);
}
.staff-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(300px, calc((100% - 16px) / 3)), 1fr));
  gap: 8px;
  padding: 6px 0 24px;
  align-items: start;
}
.staff-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}
.staff-empty p {
  margin: 0 0 8px;
}

.staff-card.tool-accordion--card {
  background: color-mix(in srgb, var(--staff-team-color, var(--color-primary)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--staff-team-color, var(--color-primary)) 35%, transparent);
  box-shadow: none;
  padding: 0;
}
.staff-card:not(.tool-accordion--open) > .tool-accordion__body {
  display: none;
}
.staff-card.tool-accordion--card > .tool-accordion__body {
  margin-top: 0;
}
.staff-card .staff-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
}
.staff-card__title-wrap {
  flex: 1;
  min-width: 0;
}
.staff-card__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff-card__subtitle {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  margin-top: 2px;
  white-space: normal;
  word-break: break-word;
}
.staff-card .tool-accordion__body-inner {
  padding: 2px 12px 10px;
}
.staff-card__row {
  font-size: 14px;
  color: var(--color-on-surface);
  line-height: 1.45;
  word-break: break-word;
}
.staff-card__row--muted {
  color: var(--color-on-surface-secondary);
}
.staff-card__section-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-on-surface);
  margin: 10px 0 4px;
}
.staff-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.staff-page .tool-toolbar {
  padding: 0 4px;
}

/* Форма редактирования */
.staff-edit-modal__body {
  padding: 16px 20px;
}
.staff-edit-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.staff-edit-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.staff-edit-form__field--full {
  grid-column: 1 / -1;
}
.staff-edit-form__field span {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.staff-edit-form__field input,
.staff-edit-form__field select,
.staff-edit-form__field textarea {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-on-surface);
  color-scheme: light;
  transition: border-color 0.15s, background 0.15s;
}
[data-theme="dark"] .staff-edit-form__field input,
[data-theme="dark"] .staff-edit-form__field select,
[data-theme="dark"] .staff-edit-form__field textarea {
  color-scheme: dark;
}
.staff-edit-form__field input:focus,
.staff-edit-form__field select:focus,
.staff-edit-form__field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.staff-edit-form__field textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

/* Модалка ввода результатов (по нормативу) */
.staff-results-modal__body {
  padding: 12px 20px 16px;
}
.staff-results-modal__norm {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-surface);
  margin-bottom: 4px;
}
.staff-results-modal__unit-hint {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  margin-bottom: 12px;
}
.staff-results-modal__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.staff-results-modal__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-hover);
}
.staff-results-modal__person {
  flex: 1;
  min-width: 0;
}
.staff-results-modal__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff-results-modal__sub {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff-results-modal__input-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.staff-results-modal__input {
  width: 110px;
  font: inherit;
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-on-surface);
  text-align: right;
}
.staff-results-modal__input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.staff-results-modal__suffix {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  min-width: 28px;
}
.staff-results-modal__zachet {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-on-surface);
  cursor: pointer;
}
.staff-results-modal__empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
}
.staff-results-modal__footer {
  justify-content: flex-end;
}

/* Модалка просмотра всех результатов сотрудника */
.staff-results-view-modal__body {
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.staff-results-view-modal__empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--color-on-surface-secondary);
}
.staff-results-view-modal__section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-on-surface-secondary);
  margin-bottom: 6px;
}
.staff-results-view-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.staff-results-view-modal__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-hover);
}
.staff-results-view-modal__row-main {
  flex: 1;
  min-width: 0;
}
.staff-results-view-modal__title {
  font-size: 14px;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-results-view-modal__ts {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
}
.staff-results-view-modal__value {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
  flex-shrink: 0;
}

/* Wrapper кнопок в карточке норматива fizo/upr — чтобы кнопки выстраивались в ряд */
.upr-item__actions,
.fyz-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
/* Сбрасываем собственный margin-top у history-btn — теперь управляет wrapper */
.upr-item__actions .upr-item__history-btn,
.fyz-item__actions .fyz-item__history-btn {
  margin-top: 0;
  align-self: auto;
}
.upr-item__staff-btn,
.fyz-item__staff-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.upr-item__staff-btn svg,
.fyz-item__staff-btn svg {
  flex-shrink: 0;
  opacity: 0.85;
}

@media (max-width: 900px) {
  .staff-edit-form {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Инструмент "Пожарные автомобили" (PA)
   ============================================================ */
.main-content:has(.pa-page) { padding-top: 0; }

.pa-page {
  display: flex;
  flex-direction: column;
  padding: 0 0 60px;
  width: 100%;
}
.pa-content {
  padding: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  container-type: inline-size;
}

/* Группы ПА: в 1 колонку по умолчанию, в 2 — при широком контейнере.
   Слева — основные (общего + целевого применения), справа — специальные. */
.pa-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@container (min-width: 1000px) {
  .pa-groups {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 14px;
    align-items: start;
  }
  .pa-groups__col-main {
    grid-column: 1;
  }
  .pa-groups__col-spec {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  .pa-groups .pa-ad-slot--mid {
    display: none;
  }
}
.pa-page .tool-toolbar--dense {
  padding: 0;
}
.pa-item > .tool-accordion__header,
.pa-cls > .tool-accordion__header {
  padding-left: 0;
  padding-right: 8px;
}
.pa-item > .tool-accordion__header .tool-accordion__title,
.pa-cls > .tool-accordion__header .tool-accordion__title {
  transform-origin: left center;
  transition: color 0.15s ease, transform 0.15s ease;
  will-change: transform;
}
.pa-item > .tool-accordion__header:hover .tool-accordion__title,
.pa-cls > .tool-accordion__header:hover .tool-accordion__title {
  color: var(--color-primary);
  transform: scale(1.03);
}
.pa-intro-note {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  opacity: 0.75;
}
.pa-heading {
  margin: 14px 0 0;
  padding-left: 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--color-on-surface);
  text-align: left;
}
.pa-subheading {
  margin: 10px 0 2px;
  padding-left: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  text-align: left;
}
.pa-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-surface);
}
.pa-text strong { font-weight: 700; }
.pa-intro {
  color: var(--color-on-surface-secondary);
}
.pa-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pa-classifications {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}
.pa-item .tool-accordion__title,
.pa-cls .tool-accordion__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
}

/* Рекламный слот */
.pa-ad-slot {
  display: block;
  margin: 12px 0;
}
.pa-ad-slot:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.pa-ad-slot .yandex-ad { margin: 0; }
.pa-page--searching .pa-ad-slot--mid {
  display: none !important;
}
.pa-item__body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.pa-item__body .pa-text {
  flex: 1 1 240px;
  min-width: 0;
}
.pa-image {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  max-width: 240px;
  max-height: 200px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  cursor: zoom-in;
  background: var(--color-bg);
  object-fit: contain;
}

/* Поиск */
.pa-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  min-width: 180px;
  max-width: 260px;
  transition: border-color 0.15s;
}
.pa-search:focus-within {
  border-color: var(--color-primary);
}
.pa-search svg {
  flex-shrink: 0;
  color: var(--color-on-surface-secondary);
}
.pa-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: 13px;
  color: var(--color-on-surface);
}
.pa-search input::placeholder {
  color: var(--color-on-surface-secondary);
}
.pa-search input[type="search"]::-webkit-search-cancel-button,
.pa-search input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}
.pa-search__clear {
  display: none;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  padding: 0;
  align-items: center;
  justify-content: center;
}
.pa-search--has-query .pa-search__clear {
  display: inline-flex;
}
.pa-search__clear:hover {
  color: var(--color-on-surface);
}

.pa-item[hidden],
.pa-subheading[hidden],
.pa-intro[hidden] {
  display: none !important;
}
.pa-empty {
  padding: 24px 8px;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
  text-align: center;
}

/* css/tools/graph.css */
/* === Инструмент "История выездов" === */

.main-content:has(.graph-page) { padding: 0 8px var(--global-ad-safe-bottom); }

.graph-page {
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}

.graph-toolbar__count {
  color: var(--color-on-surface-secondary);
  font-weight: 500;
  margin-left: 4px;
}

.graph-page .tool-toolbar {
  padding: 0 4px;
}

/* Переключатель режимов (За месяц / За год / За всё время) — стиль .tool-tabs */
.graph-mode-tabs {
  margin: 8px 4px 4px;
}

/* Шапка периода (< Апрель 2026 >) — паттерн Норма часов */
.graph-period-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  margin: 0 4px;
}
.graph-period-nav {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.graph-period-nav:hover {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.graph-period-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-on-surface);
}

/* Фильтры смен (под графиком) */
.graph-teams-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 4px 8px;
  justify-content: center;
}
.graph-team-btn { font-size: 13px; }

/* Диаграмма */
.graph-chart-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 10px 6px;
  margin: 4px 4px 8px;
  overflow-x: auto;
  /* justify-content:center ломает скролл при узких экранах — SVG обрезается
     по краям. Используем text-align:center, чтобы узкие диаграммы («за год»)
     выравнивались, а широкие («за месяц», 31 столбец) скроллились от 0. */
  text-align: center;
}
.graph-chart {
  display: inline-block;
  vertical-align: top;
}
.graph-chart-grid {
  stroke: var(--color-border);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.55;
}
.graph-chart-axis-label {
  font-family: var(--font-family);
  font-size: 10px;
  fill: var(--color-on-surface-secondary);
}
.graph-chart-axis-label--x {
  font-size: 12px;
  font-weight: 500;
  fill: var(--color-on-surface);
}
.graph-chart-bar-label {
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  pointer-events: none;
}
.graph-chart-total {
  font-family: var(--font-family);
  font-size: 12px;
  font-weight: 700;
  fill: var(--color-on-surface);
  pointer-events: none;
}
.graph-chart-bar {
  transition: opacity 0.15s;
}
.graph-chart-bar:hover { opacity: 0.8; }
.graph-chart-empty {
  padding: 32px 12px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
}

/* Рекламный слот (между фильтром смен и списком выездов) */
.graph-ad-slot {
  display: block;
  margin: 4px 4px 8px;
}
.graph-ad-slot:empty {
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
}
.graph-ad-slot .yandex-ad { margin: 0; }

/* Список выездов */
.graph-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 4px 24px;
}
.graph-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
}
.graph-empty p { margin: 0 0 6px; }
.graph-empty p:last-child { margin: 0; }

.graph-card {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: color-mix(in srgb, var(--team-color, var(--color-primary)) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--team-color, var(--color-primary)) 35%, transparent);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s;
  overflow: hidden;
}
.graph-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.graph-card:active { transform: translateY(1px); }

.graph-card__main {
  flex: 1;
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  min-width: 0;
}
.graph-card__content {
  flex: 1;
  min-width: 0;
}
.graph-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
  word-break: break-word;
}
.graph-card__duration {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  margin-top: 2px;
}
.graph-card__desc {
  font-size: 13px;
  color: var(--color-on-surface);
  margin-top: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
.graph-card__staff {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--team-color, var(--color-primary)) 40%, transparent);
}
.graph-card__staff-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-on-surface-secondary);
  margin-bottom: 4px;
}
.graph-card__staff-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.graph-card__staff-list li {
  font-size: 13px;
  color: var(--color-on-surface);
}
.graph-card__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  flex-shrink: 0;
}
.graph-card__actions .btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
}

/* ============ Модалка Add/Edit ============ */

.graph-edit-modal__body {
  padding: 14px 20px 18px;
}
.graph-edit-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.graph-edit-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.graph-edit-form__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.graph-edit-form__field--full { grid-column: 1 / -1; }
.graph-edit-form__field > span {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.graph-edit-form__field input[type="datetime-local"],
.graph-edit-form__field input[type="number"],
.graph-edit-form__field textarea {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-on-surface);
  color-scheme: light;
  transition: border-color 0.15s, background 0.15s;
}
[data-theme="dark"] .graph-edit-form__field input,
[data-theme="dark"] .graph-edit-form__field textarea {
  color-scheme: dark;
}
.graph-edit-form__field input:focus,
.graph-edit-form__field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
.graph-edit-form__field textarea {
  resize: vertical;
  min-height: 70px;
  font-family: inherit;
}
.graph-edit-form__teams {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}

/* Picker личного состава */
.graph-edit-staff {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px;
  background: var(--color-surface);
}
.graph-edit-staff__empty {
  padding: 16px;
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  text-align: center;
}
.graph-edit-staff__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  transition: background 0.1s;
}
.graph-edit-staff__row:hover { background: var(--color-hover); }
.graph-edit-staff__row--on { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }

/* Свитч (Material-like toggle) */
.graph-edit-staff__switch {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  min-width: 0;
}
.graph-edit-staff__switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.graph-edit-staff__switch-ui {
  position: relative;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  background: var(--color-border);
  border-radius: 999px;
  transition: background 0.15s;
}
.graph-edit-staff__switch-ui::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.graph-edit-staff__switch input[type="checkbox"]:checked ~ .graph-edit-staff__switch-ui {
  background: var(--color-primary);
}
.graph-edit-staff__switch input[type="checkbox"]:checked ~ .graph-edit-staff__switch-ui::after {
  transform: translateX(16px);
}
.graph-edit-staff__switch input[type="checkbox"]:focus-visible ~ .graph-edit-staff__switch-ui {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.graph-edit-staff__person {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.graph-edit-staff__name {
  font-size: 14px;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.graph-edit-staff__team {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}
.graph-edit-staff__gdzs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.graph-edit-staff__gdzs > span {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.graph-edit-staff__gdzs input {
  width: 72px;
  font: inherit;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-on-surface);
  text-align: right;
  color-scheme: light;
}
[data-theme="dark"] .graph-edit-staff__gdzs input { color-scheme: dark; }
.graph-edit-staff__gdzs input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.graph-edit-staff__gdzs input[disabled] { opacity: 0.4; }

.graph-edit-modal__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.graph-edit-modal__footer-right {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

@media (max-width: 900px) {
  .graph-edit-form__row { grid-template-columns: 1fr; }
  .graph-edit-staff__row { flex-wrap: wrap; }
  .graph-edit-staff__gdzs { margin-left: 24px; }
}

/* css/tools/ai.css */
/* === ИИ-помощник === */

.main-content:has(.ai-page) { padding: 0 6px var(--global-ad-safe-bottom) 0; }

.ai-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - var(--header-height, 56px));
  min-height: 0;
  position: relative;
}

/* Заглушка для не-платных — сообщение по центру панели + кнопка в профиль. */
.ai-page--locked {
  height: calc(100vh - var(--header-height, 56px) - var(--global-ad-safe-bottom));
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ai-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 520px;
  text-align: center;
}
.ai-locked__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.5;
}
.ai-locked__btn {
  min-width: 180px;
}

.ai-toolbar { padding: 0 16px; }

.ai-counter {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  margin-left: 8px;
  white-space: nowrap;
}

.ai-btn-enter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-on-surface-secondary);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
}
.ai-btn-enter svg { display: block; width: 16px; height: 16px; }
.ai-btn-enter:hover:not([disabled]) { background: var(--color-hover); opacity: 1; }
.ai-btn-enter--active {
  color: var(--color-primary);
  opacity: 1;
}

/* --- Список сообщений --- */
.ai-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 0 260px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
}

.ai-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-secondary);
  padding: 40px 20px;
  text-align: center;
}
.ai-empty__text { max-width: 440px; font-size: 15px; line-height: 1.5; }

/* --- Пузыри --- */
.ai-message {
  max-width: none;
  padding: 10px 14px;
  border-radius: 16px;
  position: relative;
  word-wrap: break-word;
  line-height: 1.5;
  font-size: 14.5px;
}

.ai-message--user {
  align-self: flex-end;
  max-width: calc(100% - 64px);
  background: color-mix(in srgb, var(--color-on-surface) 12%, transparent);
  color: var(--color-on-surface);
  border-bottom-right-radius: 0;
}

.ai-message--assistant {
  align-self: flex-start;
  margin-left: 10px;
  max-width: calc(100% - 74px);
  background: transparent;
  color: var(--color-on-surface);
  border: none;
  padding: 0 4px;
  border-bottom-left-radius: 0;
}

.ai-message__text { white-space: normal; }
.ai-message--user .ai-message__text { white-space: pre-wrap; }

.ai-message__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.ai-message__time {
  font-size: 11px;
  opacity: 0.65;
}

.ai-message__actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}
.ai-message:hover .ai-message__actions { opacity: 1; }

.ai-message__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.ai-message__action:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .ai-message--assistant .ai-message__action:hover { background: rgba(255, 255, 255, 0.08); }
.ai-message--user .ai-message__action:hover { background: rgba(255, 255, 255, 0.18); }

/* --- Typing indicator --- */
.ai-message--typing { padding: 12px 14px; }
.ai-typing {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-style: italic;
  color: var(--color-on-surface-secondary);
}
.ai-typing__spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
}
.ai-typing__dots {
  display: inline-block;
  min-width: 18px;
  font-family: monospace;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }

/* --- Markdown --- */
.ai-markdown p { margin: 0 0 8px; }
.ai-markdown p:last-child { margin-bottom: 0; }
.ai-md__h1, .ai-md__h2, .ai-md__h3 {
  margin: 8px 0 4px;
  color: var(--color-on-surface);
  font-weight: 600;
  line-height: 1.3;
}
.ai-md__h1 { font-size: 18px; }
.ai-md__h2 { font-size: 16px; }
.ai-md__h3 { font-size: 15px; }
.ai-md__ul, .ai-md__ol { margin: 4px 0 8px; padding-left: 22px; }
.ai-md__ul li, .ai-md__ol li { margin: 2px 0; }
.ai-md__quote {
  margin: 6px 0;
  padding: 6px 10px;
  border-left: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 4px;
  color: var(--color-on-surface-secondary);
}
.ai-md__code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-on-surface) 10%, transparent);
}
.ai-md__pre {
  margin: 6px 0;
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.45;
}
.ai-md__pre code {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  background: transparent;
  padding: 0;
}
.ai-markdown a {
  color: var(--color-primary);
  text-decoration: underline;
}
[data-theme="dark"] .ai-md__pre,
[data-theme="dark"] .ai-md__code {
  background: color-mix(in srgb, var(--color-on-surface) 12%, transparent);
}

/* --- Input area --- */
.ai-input-area {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 32px;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  z-index: 2;
}

.ai-input-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: border-color 0.15s;
  overflow: hidden;
}
.ai-input-wrap:focus-within { border-color: var(--color-primary); }
[data-theme="dark"] .ai-input-wrap { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); }

.ai-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  max-height: 160px;
  padding: 10px 14px 4px;
  border: none;
  background: transparent;
  color: var(--color-on-surface);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  outline: none;
}
.ai-input::placeholder { color: var(--color-on-surface-secondary); opacity: 0.5; }

.ai-input-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 4px 6px 6px;
}

.ai-send-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
}
.ai-send-btn--stop {
  background: #e53935;
  border-color: #e53935;
  color: #fff;
}
[data-theme="dark"] .ai-send-btn--stop { color: #fff; }

/* --- Toast --- */
.ai-toast {
  position: fixed;
  bottom: 120px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--color-on-surface);
  color: var(--color-surface);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 1000;
}
.ai-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --- FAQ / Limit modal content --- */
.ai-faq { font-size: 13px; }
.ai-faq p { margin: 0 0 8px; line-height: 1.45; color: var(--color-on-surface); font-size: 13px; }
.ai-faq__accent { color: var(--color-primary); font-weight: 600; }
.ai-faq__list { margin: 4px 0 0; padding-left: 20px; }
.ai-faq__list li { margin: 3px 0; line-height: 1.45; color: var(--color-on-surface); font-size: 13px; }
.ai-faq__footer { margin-top: 14px; display: flex; justify-content: center; }

.ai-limit { text-align: center; padding: 8px 0; }
.ai-limit__title { font-size: 16px; font-weight: 600; color: var(--color-on-surface); margin-bottom: 12px; }
.ai-limit__text { color: var(--color-on-surface-secondary); line-height: 1.5; margin-bottom: 16px; }
.ai-limit__btn { margin: 0 auto; }

/* css/tools/schemes.css */
/* === Инструмент "Схемы" === */

.main-content:has(.schemes-page) { padding-top: 0; }
/* В режиме редактора iframe должен занимать всё пространство, но не прилегать
   к правой панели документов — оставляем 6px зазор справа. */
.main-content:has(.schemes-page--editor) { padding: 0 6px 0 0; }

.schemes-page {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.schemes-page--editor {
  height: calc(100vh - var(--header-height, 56px));
}

/* ───── Табы «Мои схемы / База схем» (в toolbar) ───── */
.schemes-tabs {
  display: inline-flex;
  background: color-mix(in srgb, var(--color-on-surface) 8%, var(--color-surface));
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.schemes-tab {
  border: 0;
  background: transparent;
  color: var(--color-on-surface-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .15s, color .15s;
  white-space: nowrap;
}

.schemes-tab:hover { color: var(--color-on-surface); }

.schemes-tab--active {
  background: var(--color-primary);
  color: var(--color-on-primary, #fff);
}

[data-theme="dark"] .schemes-tab--active { color: #000; }

/* ───── Busy-оверлей для долгих операций (upload/fetch) ───── */
.schemes-busy {
  background: rgba(0, 0, 0, 0.4);
}
.schemes-busy__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  min-width: 220px;
}
.schemes-busy__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: schemes-spin 0.8s linear infinite;
}
.schemes-busy__text {
  font-size: 14px;
  color: var(--color-on-surface);
  text-align: center;
}

/* ───── Статус загрузки базы схем ───── */
.schemes-public-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 16px;
  color: var(--color-on-surface-secondary);
}

.schemes-public-status__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: schemes-spin 0.8s linear infinite;
}

.schemes-public-status__text {
  font-size: 14px;
}

/* ───── Список ───── */
.schemes-body {
  padding: 16px 0 60px;
}

.schemes-empty {
  margin: 40px auto;
  max-width: 540px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-align: center;
}

.schemes-empty__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--color-on-surface);
}

.schemes-empty__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-on-surface-secondary);
}

.schemes-empty .btn {
  margin-top: 18px;
}

.schemes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.scheme-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}

.scheme-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* Превью — квадратная зона, шахматка-фон сквозь прозрачные SVG. */
.scheme-card__preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    linear-gradient(45deg, color-mix(in srgb, var(--color-on-surface) 6%, transparent) 25%, transparent 25%),
    linear-gradient(-45deg, color-mix(in srgb, var(--color-on-surface) 6%, transparent) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--color-on-surface) 6%, transparent) 75%),
    linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--color-on-surface) 6%, transparent) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.scheme-card__preview-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.scheme-card__preview-placeholder {
  color: color-mix(in srgb, var(--color-on-surface) 30%, transparent);
  transform: scale(2.2);
}

/* Низ карточки — название, дата, действия. */
.scheme-card__body {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  min-height: 56px;
}

.scheme-card__main {
  flex: 1;
  min-width: 0;
}

.scheme-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.scheme-card__meta {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  margin-top: 2px;
}

.scheme-card__actions {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.scheme-card__actions .btn {
  padding: 4px 8px;
}

.scheme-card__delete:hover { color: #d32f2f; }

/* Замочек на карточке защищённой публичной схемы. */
.scheme-card__lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  vertical-align: middle;
  color: var(--color-on-surface-secondary);
}
.scheme-card__lock svg { display: block; }

/* Маркер «уже в базе» рядом с названием своей схемы. */
.scheme-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-on-primary, #fff);
  background: var(--color-primary);
  border-radius: 50%;
  vertical-align: middle;
}
[data-theme="dark"] .scheme-card__badge { color: #000; }

/* ───── Редактор ───── */
/* Аппбар редактора: кнопка «Назад» + имя схемы (с бейджем режима для
   публичных) + action-кнопки справа. Стилистически совпадает с .tool-toolbar
   других инструментов. */
.schemes-appbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-on-surface);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .15s;
}
.schemes-appbar__back:hover {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.schemes-appbar__back svg { display: block; pointer-events: none; }

.schemes-appbar__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 6px;
  outline: none;
  transition: background-color .15s;
}
.schemes-appbar__title--clickable { cursor: pointer; }
.schemes-appbar__title--clickable:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.schemes-appbar__title:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.schemes-appbar__tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: var(--color-primary);
  border-radius: 4px;
  flex-shrink: 0;
  cursor: help;
}

.schemes-appbar__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.schemes-canvas {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--color-bg);
}

/* Прелоадер по центру холста, виден пока iframe грузится. После события
   schemes-iframe-ready (см. render.js) скрывается. */
.schemes-canvas::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border: 3px solid var(--color-primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: schemes-spin 0.8s linear infinite;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s;
  z-index: 1;
}

.schemes-canvas--ready::before { opacity: 0; }

@keyframes schemes-spin { to { transform: rotate(360deg); } }

.schemes-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  position: relative;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.25s;
}

.schemes-canvas--ready .schemes-iframe { opacity: 1; }

/* Импорт-кнопка (label обёртка для file input) — поведение как у btn */
#schemes-import-label { cursor: pointer; }
#schemes-import-label input[type=file] { display: none; }

/* css/tools/map2.css */
/* === Карты 2.0 === */

/* Карта занимает всю центральную панель без отступов. */
.main-content:has(.map2-page) {
  padding: 0;
}

/* Страница карты — позиционирующий контейнер. Тулбар абсолютный поверх карты
   (матовый, прозрачный), карта во всю высоту — поэтому .map2-page не flex. */
.map2-page {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Заголовок инструмента — белый текст с тенью поверх карты, на месте
   бывшего аппбара (слева сверху). Не перехватывает клики. */
.map2-title {
  position: absolute;
  top: 14px;
  left: 16px;
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 0.55),
    0 0 2px rgba(0, 0, 0, 0.35);
  z-index: 3;
  pointer-events: none;
  user-select: none;
}

.map2-map-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.map2-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Эмуляция ночного режима на Яндекс.Картах 2.1 Web (нет нативного) */
.map2-map--night {
  filter: invert(1) hue-rotate(180deg) brightness(0.95);
}

/* Статус загрузки */
.map2-status {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  color: var(--color-on-surface-secondary);
  box-shadow: var(--shadow);
  z-index: 3;
  font-size: 14px;
}

.map2-status--error {
  color: #D32F2F;
}

/* ── Прелоадер загрузки слоя с сервера ──
   Показывается поверх карты с тёмной вуалью + карточка с прогресс-баром.
   Управляется из tools/map2/sync-flow.js (map2ShowLoadProgress/Update/Hide). */
.map2-load-progress {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  animation: map2-load-fade-in 0.15s ease-out;
}
.map2-load-progress[hidden] { display: none; }
@keyframes map2-load-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.map2-load-progress__card {
  min-width: 280px;
  max-width: 440px;
  padding: 18px 22px;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map2-load-progress__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.4;
}

.map2-load-progress__bar {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--color-bg);
  border-radius: 4px;
  overflow: hidden;
}

.map2-load-progress__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  border-radius: 4px;
  transition: width 0.15s ease-out;
}

.map2-load-progress--indeterminate .map2-load-progress__bar-fill {
  width: 40% !important;
  animation: map2-load-indeterminate 1.2s ease-in-out infinite;
}
@keyframes map2-load-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

.map2-load-progress__meta {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  min-height: 14px;
  font-variant-numeric: tabular-nums;
}

/* ── Вертикальные колонки кнопок поверх карты ── */
/* Центрированы по вертикали; отступ от краёв карты = 12px.
   Появление и скрытие — всегда плавный slide за свой край карты. */
.map2-btn-stack {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 2;
  transition:
    transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease,
    right 0.25s ease,
    left 0.25s ease;
}

.map2-btn-stack--left  { left: 12px; }
.map2-btn-stack--right { right: 12px; }

/* Скрытое состояние — каждая колонка уезжает за свой край.
   Используется в режиме печати, режиме выбора координат таблицы и в
   мобильной раскладке с открытой боковой панелью. */
.map2-btn-stack--hidden {
  opacity: 0;
  pointer-events: none;
}
.map2-btn-stack--left.map2-btn-stack--hidden {
  transform: translate(calc(-100% - 24px), -50%);
}
.map2-btn-stack--right.map2-btn-stack--hidden {
  transform: translate(calc(100% + 24px), -50%);
}

/* ── Базовая кнопка (квадратная, скруглённые углы, матовая) ──
   В неактивном состоянии — та же матовость и прозрачность, что была у
   бывшего аппбара (light: 42% белого, dark: 38% чёрного) + лёгкий блюр. */
.map2-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--color-on-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  position: relative;
  transition:
    background 0.15s,
    color 0.15s,
    opacity 0.25s ease,
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] .map2-btn {
  background: rgba(0, 0, 0, 0.38);
}

.map2-btn:hover {
  background: rgba(255, 255, 255, 0.72);
  color: var(--color-primary);
}

[data-theme="dark"] .map2-btn:hover {
  background: rgba(0, 0, 0, 0.65);
}

/* Активное состояние — непрозрачный фон */
.map2-btn--active {
  background: var(--color-primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: #fff;
}

[data-theme="dark"] .map2-btn--active {
  background: #9DCAFF; /* --color-primary без альфы */
  color: #000;
}

.map2-btn--active:hover {
  background: var(--color-primary);
  color: #fff;
  opacity: 0.88;
}

[data-theme="dark"] .map2-btn--active:hover {
  background: #9DCAFF;
  color: #000;
}

/* Кнопка неактивна (используется для Undo/Redo, когда стек пуст). */
.map2-btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* Блок кнопок в правом верхнем углу карты: Undo / Redo / бургер. */
.map2-top-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  z-index: 4;
}
.map2-top-actions .map2-btn[hidden] {
  display: none;
}

/* Плашка-подсказка «Добавьте слой…» — оформлена в одном стиле с
   map2-sync-banner (40px, фон surface, тень, цветная левая полоска).
   Содержит две прямые кнопки действия: «Открыть файл» и «Искать в базе». */
.map2-no-layers-hint {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 10px 0 12px;
  box-sizing: border-box;
  background: var(--color-surface);
  color: var(--color-on-surface);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  max-width: calc(100% - 24px);
}

.map2-no-layers-hint[hidden] {
  display: none;
}

.map2-no-layers-hint__icon {
  font-size: 18px !important;
  color: var(--color-primary);
  flex-shrink: 0;
}

.map2-no-layers-hint__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

.map2-no-layers-hint .btn--sm {
  height: 28px;
  padding: 0 10px;
  flex-shrink: 0;
}

/* Режим «Все водоисточники»: индикатор-плашка в левом верхнем углу карты,
   чтобы пользователь понимал, что видит не один слой, а глобальную выборку. */
.map2-all-mode-indicator {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: none;
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.map2-all-mode-indicator:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.map2-all-mode-indicator .material-icons-round {
  font-size: 18px;
  color: var(--color-primary);
}

.map2-all-mode-indicator__close {
  font-size: 16px !important;
  color: var(--color-on-surface-secondary) !important;
  margin-left: 2px;
}

/* Плашка «Приблизьте карту» — показывается в режиме «Все водоисточники»
   при zoom < MAP2_ALL_MIN_ZOOM. По центру карты, клик — приближает карту
   до минимального допустимого зума, чтобы маркеры сразу подтянулись. */
.map2-all-zoom-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s;
}

.map2-all-zoom-hint:hover {
  transform: translate(-50%, -51%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.map2-all-zoom-hint .material-icons-round {
  font-size: 20px;
  color: var(--color-primary);
}

/* Material Icons font внутри кнопки */
.map2-btn__icon {
  font-size: 22px;
  line-height: 1;
  user-select: none;
}

/* Бейдж радиуса (500/200) поверх иконки */
.map2-btn__stack {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}

.map2-btn__badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.2px;
  pointer-events: none;
  color: inherit;
}

/* ── Заглушка-контент в модалке ── */
.map2-empty {
  padding: 32px 16px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* ── Анимированное кольцо фокуса на метке (клик "К маркеру"/выбор в списке) ──
   Рендерится как HTML-layout внутри ymaps.Placemark. Сужается от scale(3) к 1,
   исчезает. Удаляется JS-кодом по animationend. */
.map2-focus-ring {
  position: absolute;
  left: -32px;
  top: -32px;
  width: 64px;
  height: 64px;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
  animation: map2-focus-shrink 1s ease-out forwards;
}

@keyframes map2-focus-shrink {
  0%   { transform: scale(3);   opacity: 0;   border-width: 2px; }
  15%  { opacity: 0.9; }
  100% { transform: scale(0.6); opacity: 0;   border-width: 4px; }
}

/* ── Поле поиска по адресу ── */
.map2-search {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  width: min(420px, calc(100% - 120px));
  padding: 4px 4px 4px 12px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .map2-search {
  background: rgba(20, 22, 26, 0.72);
}

.map2-search[hidden] { display: none; }

.map2-search__input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--color-on-surface);
}

.map2-search__input::placeholder {
  color: var(--color-on-surface-secondary);
}

.map2-search__submit,
.map2-search__clear {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map2-search__submit:hover,
.map2-search__clear:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-primary);
}

[data-theme="dark"] .map2-search__submit:hover,
[data-theme="dark"] .map2-search__clear:hover {
  background: rgba(255, 255, 255, 0.1);
}

.map2-search__submit .material-icons-round,
.map2-search__clear .material-icons-round {
  font-size: 20px;
}

/* ── Toast (разовые уведомления поверх карты) ── */
.map2-toast {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 20px);
  padding: 10px 16px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 13px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-width: calc(100% - 48px);
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10;
}

.map2-toast--visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* .map2-search уже position: absolute — error позиционируется относительно него */
.map2-search__error {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  padding: 4px 10px;
  background: rgba(211, 47, 47, 0.92);
  color: #fff;
  font-size: 12px;
  border-radius: var(--radius-sm);
  text-align: center;
  box-shadow: var(--shadow);
}

/* ── Выпадающий список подсказок ── */
.map2-search__suggest {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 6;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

[data-theme="dark"] .map2-search__suggest {
  background: #1E2128;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}

.map2-search__suggest[hidden] { display: none; }

.map2-search__suggest-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  cursor: pointer;
  color: var(--color-on-surface);
  font-size: 14px;
  line-height: 1.3;
}

.map2-search__suggest-item:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.map2-search__suggest-item--active {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.map2-search__suggest-item__sub {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}

.map2-search__suggest-item__icon {
  font-size: 18px;
  color: var(--color-on-surface-secondary);
  flex: 0 0 auto;
}

.map2-search__suggest-clear {
  padding: 8px 14px;
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  font-size: 13px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.map2-search__suggest-clear:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  color: var(--color-on-surface);
}

/* ── Подпись с номером метки (showLabels) ──
   Обёртка обнимает плашку по ширине, чтобы левый верхний угол видимой
   подписи совпадал с iconContentOffset (≈(-8, +8) = сектор 7-8 часов
   на иконке). Никаких 80px-фиксированных ширин и flex-центрирования. */
.map2-marker-label-wrap {
  display: inline-block;
  width: max-content;
  pointer-events: none;
}

.map2-marker-label {
  display: inline-block;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ── Box с результатом линейки / площади в верхнем центре карты ── */
.map2-measure-box {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 13px;
  color: var(--color-on-surface);
  max-width: calc(100% - 120px);
}

[data-theme="dark"] .map2-measure-box {
  background: rgba(20, 22, 26, 0.82);
  color: var(--color-on-surface);
}

.map2-measure-box__value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.map2-measure-box__hint {
  color: var(--color-on-surface-secondary);
  font-size: 12px;
}

.map2-measure-box__reset-points,
.map2-measure-box__close {
  border: none;
  background: transparent;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  display: flex;
  align-items: center;
}

.map2-measure-box__reset-points:hover,
.map2-measure-box__close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--color-primary);
}

[data-theme="dark"] .map2-measure-box__reset-points:hover,
[data-theme="dark"] .map2-measure-box__close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.map2-measure-box__extra {
  font-weight: 500;
  color: var(--color-on-surface);
  padding-left: 6px;
  border-left: 1px solid var(--color-border);
}

/* Пустой extra-slot (рукавов ещё не посчитано) не должен занимать ширину
   и ломать одну строку панельки линейки. */
.map2-measure-box__extra:empty {
  display: none;
}

/* ── Модалка выбора типа новой метки (Водоисточник / Подразделение) ── */
.map2-add-chooser__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 8px 0 4px;
}

.map2-add-chooser__option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.map2-add-chooser__option:hover {
  background: var(--color-bg);
  border-color: var(--color-primary);
}

.map2-add-chooser__option:active {
  transform: scale(0.98);
}

.map2-add-chooser__option img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.map2-add-chooser__option .material-icons-round {
  font-size: 40px;
  color: var(--color-primary);
}

.map2-add-chooser__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-on-surface);
  text-align: center;
}

/* ── Кнопки «Добавить/Редактировать район/подрайон» в панели деталей ── */
.map2-hydrant-polygon-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.map2-hydrant-polygon-actions .btn {
  justify-content: flex-start;
  width: 100%;
}

/* ── Sticky-баннер синхронизации слоя ── */
/* Высота ровно как у плавающих кнопок карты (.map2-btn = 40px), чтобы
   визуально выровняться с ними в правом верхнем углу. */
.map2-sync-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 8px 0 12px;
  box-sizing: border-box;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  color: var(--color-on-surface);
  max-width: calc(100% - 24px);
}

.map2-sync-banner__icon {
  font-size: 18px;
  line-height: 1;
}

/* Внутренняя кнопка действия должна помещаться в 40px-банер. */
.map2-sync-banner .btn--sm {
  height: 28px;
  padding: 0 10px;
}

.map2-sync-banner--push {
  border-left: 3px solid #F9A825;
}

.map2-sync-banner--push .map2-sync-banner__icon {
  color: #F9A825;
}

.map2-sync-banner--pull {
  border-left: 3px solid var(--color-primary);
}

.map2-sync-banner--pull .map2-sync-banner__icon {
  color: var(--color-primary);
}

.map2-sync-banner__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 420px;
}

.map2-sync-banner .btn {
  flex-shrink: 0;
}

/* Кнопка «сбросить все правки» (крестик справа в push-баннере). */
.map2-sync-banner__close {
  width: 28px;
  height: 28px;
  padding: 0;
  margin-left: 4px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.map2-sync-banner__close:hover {
  background: color-mix(in srgb, currentColor 14%, transparent);
}
.map2-sync-banner__close .material-icons-round {
  font-size: 18px;
}

/* ── Модалка ввода пароля слоя ── */
.map2-password-modal__text {
  margin: 0 0 12px;
  color: var(--color-on-surface);
  font-size: 14px;
  line-height: 1.4;
}

.map2-password-modal__error {
  margin: 0 0 8px;
  padding: 6px 10px;
  background: rgba(211, 47, 47, 0.12);
  color: #D32F2F;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

/* === Рекламный баннер внизу карты === */
.map2-ad-slot {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  width: min(728px, calc(100% - 24px));
  pointer-events: auto;
}
.map2-ad-slot .yandex-ad {
  margin: 0;
}
.map2-ad-slot:empty {
  display: none;
}

/* css/tools/map2-layers.css */
/* === Карты 2.0 — панель «База водоисточников» === */

/* ── Правая боковая панель поверх карты ───────────────────────── */
.map2-layers-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100%;
  z-index: 6;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-primary);
  box-shadow: -2px 0 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  animation: map2LayersSlideIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes map2LayersSlideIn {
  from { transform: translateX(16px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* При открытой панели правая стопка кнопок отодвигается, чтобы не попадала
   под панель и оставалась кликабельной. */
.map2-page.has-map2-layers-panel .map2-btn-stack--right {
  right: calc(420px + 12px);
  transition: right 0.25s ease;
}

/* ── Шапка панели: заголовок, поиск, сортировка, статистика ───── */
.map2-layers-panel__header {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.map2-layers-panel__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}

/* Верхняя строка с заголовком и действиями — одной высоты с
   шапками sidebar'ов «Инструменты» и «Документы» (48px). */
.map2-layers-panel__row--top {
  justify-content: space-between;
  height: 48px;
  padding: 0 8px 0 14px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
}

.map2-layers-panel__row--controls {
  justify-content: space-between;
  flex-wrap: wrap;
}

.map2-layers-panel__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.map2-layers-panel__close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-on-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.map2-layers-panel__close:hover {
  background: var(--color-bg);
}

.map2-layers-panel__close .material-icons-round {
  font-size: 22px;
}

/* Поиск */
.map2-layers-search {
  position: relative;
  flex: 1;
}

.map2-layers-search__icon {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--color-on-surface-secondary);
  pointer-events: none;
}

.map2-layers-search__input {
  width: 100%;
  height: 36px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-on-surface);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}

.map2-layers-search__input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

/* Сортировка */
.map2-layers-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map2-layers-sort__label {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}

.map2-layers-sort__select {
  height: 32px;
  padding: 0 32px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-on-surface);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
}
[data-theme="dark"] .map2-layers-sort__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbb'><path d='M7 10l5 5 5-5z'/></svg>");
}

.map2-layers-iconbtn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-on-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.map2-layers-iconbtn:hover {
  background: var(--color-surface);
  color: var(--color-primary);
}

.map2-layers-iconbtn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

[data-theme="dark"] .map2-layers-iconbtn--active {
  color: #000;
}

.map2-layers-iconbtn .material-icons-round {
  font-size: 20px;
}

/* Toggle «только мои» */
.map2-layers-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-on-surface);
  cursor: pointer;
  user-select: none;
}

.map2-layers-toggle input {
  margin: 0;
  accent-color: var(--color-primary);
}

/* Статистика */
.map2-layers-panel__stats {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  padding: 2px 14px 0;
}

/* Строка статистики с кнопкой действия: текст слева, кнопка справа. */
.map2-layers-panel__stats--with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px 8px;
}

.map2-layers-panel__stats--with-action .material-icons-round {
  font-size: 16px;
}

/* ── Тело со списком карточек ─────────────────────────────────── */
/* Контент до самого правого края панели, скроллбар overlay (auto-hide
   как в sidebar и main-content — см. css/core/reset.css). Нижний
   отступ — «воздух» между последней карточкой и краем панели. */
.map2-layers-panel__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 5px var(--global-ad-safe-bottom) 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map2-layers-empty {
  padding: 30px 14px;
  text-align: center;
  font-size: 14px;
  color: var(--color-on-surface-secondary);
}

.map2-layers-empty--error {
  color: #D32F2F;
}

/* ── Карточка слоя ────────────────────────────────────────────── */
.map2-layer-card {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.map2-layer-card:hover {
  background: var(--color-surface);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  box-shadow: var(--shadow-sm);
}

.map2-layer-card:focus-visible {
  border-color: var(--color-primary);
}

/* Локальные цвета для «свежести» слоя — в одном месте, чтобы при смене
   темы/акцента можно было быстро подкрутить. Применяются к левой полоске
   и к дате в футере карточки. */
.map2-layer-card {
  --map2-fresh-color: #2E7D32;
  --map2-stale-color: #D32F2F;
}
[data-theme="dark"] .map2-layer-card {
  --map2-fresh-color: #81C784;
  --map2-stale-color: #E57373;
}

/* Авторство пользователя: синяя полоска слева. Это существующее поведение,
   оставляем как есть; со свежестью не конфликтует — «мой» слой получит
   синюю полоску вне зависимости от возраста. */
.map2-layer-card--mine {
  border-left: 3px solid var(--color-primary);
}

/* Подсветка свежести слоя: зелёная полоска для новых (<10 дней), красная —
   для устаревших (>365 дней). Обводка карточки остаётся обычной, чтобы
   визуально не отличалась от остальных. */
.map2-layer-card--fresh:not(.map2-layer-card--mine) {
  border-left: 3px solid var(--map2-fresh-color);
}
.map2-layer-card--stale:not(.map2-layer-card--mine) {
  border-left: 3px solid var(--map2-stale-color);
}

/* Дата в футере подкрашивается в цвет свежести. */
.map2-layer-card--fresh .map2-layer-card__date {
  color: var(--map2-fresh-color);
}
.map2-layer-card--stale .map2-layer-card__date {
  color: var(--map2-stale-color);
}

.map2-layer-card--current {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg));
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.map2-layer-card--loading {
  opacity: 0.6;
  pointer-events: none;
}

.map2-layer-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.map2-layer-card__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.3;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map2-layer-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #fff;
  background: var(--color-primary);
  border-radius: 4px;
  flex-shrink: 0;
}

[data-theme="dark"] .map2-layer-card__badge {
  color: #000;
}

.map2-layer-card__sub {
  font-size: 13px;
  color: var(--color-on-surface);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.map2-layer-card__region {
  font-weight: 500;
}

.map2-layer-card__city {
  color: var(--color-on-surface-secondary);
}

.map2-layer-card__meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}

.map2-layer-card__count {
  font-weight: 500;
}

.map2-layer-card__dot {
  opacity: 0.5;
}

.map2-layer-card__autor {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map2-layer-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
  font-size: 11px;
  color: var(--color-on-surface-secondary);
}

/* Карточка в панели «Загруженные слои» — с фоновой иконкой и строками
   «Загружен»/«Обновлён». Для серверных — cloud, для локальных — description.
   overflow НЕ скрываем — иначе при большом наборе экшенов нижний ряд кнопок
   визуально подрезается. Иконку размещаем внутри карточки (bottom/left
   положительные), так что overflow:visible ничего не ломает. */
.map2-layer-card--loaded {
  position: relative;
}

/* Локальный слой — нейтрально-серый фон, серверный — чуть синеватый. */
.map2-layer-card--local {
  background: color-mix(in srgb, var(--color-on-surface) 5%, var(--color-bg));
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.map2-layer-card--local:hover {
  background: color-mix(in srgb, var(--color-on-surface) 10%, var(--color-bg));
}
.map2-layer-card--server {
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-bg));
}
[data-theme="dark"] .map2-layer-card--local {
  background: color-mix(in srgb, var(--color-on-surface) 8%, var(--color-bg));
}
[data-theme="dark"] .map2-layer-card--local:hover {
  background: color-mix(in srgb, var(--color-on-surface) 14%, var(--color-bg));
}
[data-theme="dark"] .map2-layer-card--server {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
}

.map2-layer-card__bg-icon {
  position: absolute;
  left: -8px;
  bottom: -12px;
  font-size: 120px !important;
  opacity: 0.06;
  color: var(--color-on-surface);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.map2-layer-card--server .map2-layer-card__bg-icon {
  color: var(--color-primary);
}

/* Содержимое карточки должно лежать над фоновой иконкой, иначе её
   opacity-прозрачность смешивается с кнопками и выглядит как подрез. */
.map2-layer-card--loaded > :not(.map2-layer-card__bg-icon) {
  position: relative;
  z-index: 1;
}

.map2-layer-card__timestamp {
  font-size: 10px;
  color: var(--color-on-surface-secondary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.map2-layer-card__actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.map2-layer-card__iconbtn {
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-on-surface-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.map2-layer-card__iconbtn:hover {
  background: var(--color-surface);
  color: var(--color-primary);
}

.map2-layer-card__iconbtn--danger:hover {
  color: #D32F2F;
}

.map2-layer-card__iconbtn .material-icons-round {
  font-size: 16px;
}

.map2-layer-card__date,
.map2-layer-card__downloads {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.map2-layer-card__date .material-icons-round,
.map2-layer-card__downloads .material-icons-round {
  font-size: 14px;
}

/* ── Панель деталей гидранта ─────────────────────────────────── */
/* Стакается поверх панели слоёв. Те же 420px ширины. Выше z-index,
   чтобы перекрыть список и кнопки тулбара. */
.map2-hydrant-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100%;
  z-index: 7;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-primary);
  box-shadow: -4px 0 18px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  animation: map2LayersSlideIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.map2-page.has-map2-hydrant-panel .map2-btn-stack--right {
  right: calc(420px + 12px);
  transition: right 0.25s ease;
}

.map2-hydrant-panel__header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 8px 0 12px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  box-sizing: border-box;
}

.map2-hydrant-panel__title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map2-hydrant-panel__back,
.map2-hydrant-panel__close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-on-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.map2-hydrant-panel__back:hover,
.map2-hydrant-panel__close:hover {
  background: var(--color-bg);
}

.map2-hydrant-panel__back .material-icons-round,
.map2-hydrant-panel__close .material-icons-round {
  font-size: 22px;
}

.map2-hydrant-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px calc(var(--global-ad-safe-bottom) * 1.5);
  scroll-padding-bottom: calc(var(--global-ad-safe-bottom) * 1.5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Горизонтальный прокручиваемый список фото. Сама полоса растянута в
   край панели (margin-ами компенсируется padding body), а горизонтальные
   отступы живут внутри скролла — чтобы при scrollLeft=0 первое фото
   отступало от левого края. */
.map2-hydrant-photos {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin: 0 -14px;
  padding: 0 14px;
  width: calc(100% + 28px);
  min-height: 160px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.map2-hydrant-photo {
  position: relative;
  flex: 0 0 auto;
  height: 160px;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-bg);
  cursor: zoom-in;
  transition: opacity 0.15s;
}

/* Шиммер накладывается поверх img. Когда фото загрузилось — ::after
   прячется, и img становится виден. Важно не класть img под opacity:0,
   иначе browser lazy-эвристики могут решить не грузить картинку. */
.map2-hydrant-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-bg) 0%,
    color-mix(in srgb, var(--color-bg), var(--color-on-surface) 8%) 50%,
    var(--color-bg) 100%
  );
  background-size: 200% 100%;
  animation: map2-hydrant-photo-shimmer 1.4s linear infinite;
  pointer-events: none;
}

.map2-hydrant-photo.is-loaded::after,
.map2-hydrant-photo.is-error::after {
  display: none;
}

@keyframes map2-hydrant-photo-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

.map2-hydrant-photo:hover {
  opacity: 0.9;
}

.map2-hydrant-photo:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.map2-hydrant-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.map2-hydrant-photo.is-error img {
  display: none;
}

.map2-photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 40px;
  animation: map2-photo-lightbox-in 0.15s ease-out;
}

@keyframes map2-photo-lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.map2-photo-lightbox__content {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(1400px, 95vw);
  max-height: 90vh;
}

.map2-photo-lightbox__content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.map2-photo-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s;
}

.map2-photo-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Навигация между фото в multi-режиме. */
.map2-photo-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  z-index: 1;
}
.map2-photo-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.3);
}
.map2-photo-lightbox__nav--prev { left: 24px; }
.map2-photo-lightbox__nav--next { right: 24px; }
.map2-photo-lightbox__nav .material-icons-round { font-size: 28px; }
.map2-photo-lightbox__counter {
  position: absolute;
  bottom: -36px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.5);
  padding: 4px 12px;
  border-radius: 12px;
}

.map2-hydrant-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-surface);
  padding: 2px 0;
}

.map2-hydrant-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
}

.map2-hydrant-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 10px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}

.map2-hydrant-field__label {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.map2-hydrant-field__value {
  font-size: 13px;
  color: var(--color-on-surface);
  word-break: break-word;
}

.map2-hydrant-empty {
  padding: 20px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--color-on-surface-secondary);
}

.map2-hydrant-coords {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-on-surface);
}

.map2-hydrant-coords .material-icons-round {
  font-size: 18px;
  color: var(--color-on-surface-secondary);
}

.map2-hydrant-coords__value {
  flex: 1;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
}

.map2-hydrant-iconbtn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-on-surface-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.map2-hydrant-iconbtn:hover {
  background: var(--color-surface);
  color: var(--color-primary);
}

.map2-hydrant-iconbtn .material-icons-round {
  font-size: 18px;
}

.map2-hydrant-iconbtn--flash {
  color: var(--color-primary);
}

.map2-hydrant-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
}

.map2-hydrant-actions .btn {
  flex: 1 1 calc(50% - 6px);
}

.map2-hydrant-actions .btn .material-icons-round {
  font-size: 18px;
  margin-right: 4px;
}

.map2-layers-panel__top-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

/* Иконочная кнопка в правой части аппбара панели (например «Открыть в
   таблице» в «Списке меток») — рядом с кнопкой закрытия. По стилю повторяет
   .map2-layers-panel__close. */
.map2-layers-panel__top-icon-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-on-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.map2-layers-panel__top-icon-btn:hover {
  background: var(--color-bg);
  color: var(--color-primary);
}
.map2-layers-panel__top-icon-btn .material-icons-round {
  font-size: 20px;
}

/* Кнопка «Добавить +» — primary-кнопка в шапке «Базы водоисточников»:
   текст + плюс-иконка рядом. */
.map2-layers-panel__add {
  gap: 4px;
}
.map2-layers-panel__add .material-icons-round {
  font-size: 18px;
  line-height: 1;
}

/* Кнопка-иконка «Фильтры» в панели «Список меток» (#map2-hlist-filters). */
.map2-hlist-filters-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-on-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.map2-hlist-filters-btn:hover { background: var(--color-bg); }
.map2-hlist-filters-btn .material-icons-round { font-size: 20px; }

/* ── Модалка формы слоя / гидранта ────────────────────────────── */
.map2-form-modal__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
}

.map2-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map2-form-field__label {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  font-weight: 500;
}

.map2-form-field__input,
.map2-form-field__textarea,
.map2-form-field__select {
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-on-surface);
  font-size: 14px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

/* Дополнительный отступ справа у <select>, чтобы текст не вплотную упирался
   в нативную стрелку дропдауна. Используем appearance:none + кастомную
   стрелку, чтобы отступ был консистентным между браузерами. */
.map2-form-field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
}

[data-theme="dark"] .map2-form-field__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbb'><path d='M7 10l5 5 5-5z'/></svg>");
}

/* Для breakdown-селекта текст может быть длинный — обрезаем с ellipsis,
   чтобы опция Выбора не растягивала модалку. */
.map2-form-field__select--breakdown {
  text-overflow: ellipsis;
}

/* Поле ввода со суффиксом «м» и т.п. — суффикс позиционируется справа
   внутри inputа за счёт padding-right. */
.map2-form-field__suffix-wrap {
  position: relative;
  display: block;
}
.map2-form-field__suffix-wrap .map2-form-field__input {
  padding-right: 28px;
  width: 100%;
  box-sizing: border-box;
}
.map2-form-field__suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--color-on-surface-secondary);
  pointer-events: none;
}

/* В тёмной теме нативная иконка календаря у <input type="date"> остаётся
   чёрной и не видна. Делаем её светлой. */
[data-theme="dark"] .map2-form-field__input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.5);
}

.map2-form-field__textarea {
  height: auto;
  min-height: 60px;
  padding: 8px 10px;
  resize: vertical;
}

.map2-form-field__input:focus,
.map2-form-field__textarea:focus,
.map2-form-field__select:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.map2-form-field__input--invalid,
.map2-form-field__input--invalid:focus {
  border-color: #D32F2F;
  background: color-mix(in srgb, #D32F2F 8%, transparent);
}

.map2-form-modal__error {
  color: #D32F2F;
  background: color-mix(in srgb, #D32F2F 10%, transparent);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.map2-form-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px 14px;
}

.map2-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Три колонки одинаковой ширины — для расстояний от таблички. */
.map2-form-row--three {
  grid-template-columns: 1fr 1fr 1fr;
}

.map2-form-field__hint {
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  font-weight: 400;
  margin-left: 4px;
}

/* ── Поле загрузки фото гидранта ─────────────────────────────── */
.map2-photo-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.map2-photo-field__preview {
  width: 100%;
  max-height: 200px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map2-photo-field__preview img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  display: block;
}

.map2-photo-field__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.map2-photo-field__actions .btn .material-icons-round {
  font-size: 18px;
  margin-right: 4px;
}

/* Режим ввода ссылки на изображение: инпут + «Применить» + «Назад». */
.map2-photo-field__url-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.map2-photo-field__url-input {
  flex: 1 1 auto;
  min-width: 0;
}

.map2-photo-field__status {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
}

.map2-photo-field__status--error {
  color: #D32F2F;
}

/* ── Поп-меню фильтров ───────────────────────────────────────── */
.map2-filters-menu {
  width: 280px;
  max-width: calc(100vw - 16px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: var(--color-on-surface);
}

.map2-filters-menu__section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map2-filters-menu__title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-on-surface-secondary);
}

.map2-filters-menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}

.map2-filters-menu__row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.map2-filters-menu__row input {
  accent-color: var(--color-primary);
}

.map2-filters-menu__radius {
  display: flex;
  align-items: center;
  gap: 8px;
}

.map2-filters-menu__radius input[type="range"] {
  flex: 1;
  accent-color: var(--color-primary);
}

.map2-filters-menu__radius-value {
  min-width: 60px;
  text-align: right;
  font-size: 12px;
  font-weight: 500;
}

.map2-filters-menu__presets {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.map2-filters-menu__preset {
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-on-surface);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.map2-filters-menu__preset:hover {
  background: var(--color-surface);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.map2-filters-menu__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 2px;
  border-top: 1px solid var(--color-border);
  margin-top: 2px;
  padding-top: 8px;
}

/* ── Кнопка "удалить" в деталях гидранта ─────────────────────── */
.map2-hydrant-btn--danger {
  color: #D32F2F;
}

.map2-hydrant-btn--danger:hover {
  color: #fff;
  background: #D32F2F;
  border-color: #D32F2F;
}

/* ── Панель списка водоисточников ─────────────────────────────── */
.map2-hydrant-list-panel,
.map2-loaded-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 100%;
  z-index: 6;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  border-right: 1px solid var(--color-primary);
  box-shadow: -2px 0 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  animation: map2LayersSlideIn 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.map2-page.has-map2-loaded-panel .map2-btn-stack--right {
  right: calc(420px + 12px);
  transition: right 0.25s ease;
}

.map2-layer-card__badge--local {
  background: var(--color-on-surface-secondary);
}

.map2-page.has-map2-hydrant-list .map2-btn-stack--right {
  right: calc(420px + 12px);
  transition: right 0.25s ease;
}

.map2-hydrant-list-panel__header {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

/* Правая внутренняя полоска панели списка меток — отступ 4px между
   карточками и правой границей панели (у «Базы водоисточников» остаётся
   общий стиль .map2-layers-panel__body). */
#map2-hydrant-list-panel .map2-layers-panel__body {
  padding-right: 4px;
}

/* Строка статистики списка меток фиксирует высоту всегда под кнопку
   «Удалить выбранные» — чтобы её появление/исчезновение не двигало
   контент ниже. Базовые стили .map2-layers-panel__stats общие с панелью
   слоёв, поэтому переопределяем только на #map2-hlist-stats. */
#map2-hlist-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 14px 8px;
  min-height: 34px;
}

/* Элемент списка гидрантов.
   Фон — полупрозрачный цвет, соответствующий типу/состоянию (порт
   buildHydrantListItem из map2_hydrant_list.dart:727-813). Значение
   --map2-item-color задаётся inline из render'а; alpha = 0.30. */
.map2-hydrant-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px 6px 6px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--map2-item-color, transparent) 30%, transparent);
  border: 1.5px solid transparent;
  cursor: pointer;
  outline: none;
  transition: background 0.12s, box-shadow 0.12s, border-color 0.12s;
}

.map2-hydrant-list-item:hover {
  background: color-mix(in srgb, var(--map2-item-color, var(--color-primary)) 45%, transparent);
  box-shadow: var(--shadow-sm);
}

.map2-hydrant-list-item:focus-visible {
  box-shadow: 0 0 0 2px var(--color-primary) inset;
}

/* Выбранная карточка — обводка праймари. */
.map2-hydrant-list-item--selected,
.map2-hydrant-list-item--selected:hover {
  border-color: var(--color-primary);
}

.map2-hydrant-list-item__check {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* Переопределяем глобальный iOS-тумблер обратно на обычный квадратный
   чекбокс — тут это именно «выбрать элемент из списка». */
.map2-hydrant-list-item__check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-on-surface-secondary);
  transition: background 0.12s, border-color 0.12s;
}

.map2-hydrant-list-item__check input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-55%, -60%) rotate(45deg) scale(0);
  transition: transform 0.12s;
}

.map2-hydrant-list-item__check input[type="checkbox"]:checked {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.map2-hydrant-list-item__check input[type="checkbox"]:checked::before {
  transform: translate(-55%, -60%) rotate(45deg) scale(1);
}

/* В dark-mode --color-primary = светло-голубой (#9DCAFF/0.8), белая
   галочка на нём невидна — делаем чёрную (тот же паттерн, что у
   .btn--primary в buttons.css:42). */
[data-theme="dark"] .map2-hydrant-list-item__check input[type="checkbox"]::before {
  border-color: #000;
}

.map2-hydrant-list-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.map2-hydrant-list-item__number {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map2-hydrant-list-item__street {
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map2-hydrant-list-item__dist {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--color-on-surface-secondary);
  font-weight: 500;
}

.map2-hydrant-list-item__delete {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  color: var(--color-on-surface-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.map2-hydrant-list-item__delete .material-icons-round {
  font-size: 18px;
}

.map2-hydrant-list-item__delete:hover {
  background: #D32F2F;
  color: #fff;
}

/* Подразделения: такой же «контейнер», как у водоисточников, но без
   цветной привязки — просто нейтральный серый фон. */
.map2-hydrant-list-item--podr {
  background: var(--color-hover);
}
.map2-hydrant-list-item--podr:hover {
  background: color-mix(in srgb, var(--color-on-surface) 18%, transparent);
}

/* «Неопределённый» водоисточник (нет номера либо тип не распознан и не ПДР) —
   нейтральный сероватый фон, чтобы визуально отделить от типизированных. */
.map2-hydrant-list-item--muted {
  background: var(--color-hover);
}
.map2-hydrant-list-item--muted:hover {
  background: color-mix(in srgb, var(--color-on-surface) 12%, transparent);
}

/* Кнопка «Удалить выбранные» справа в строке статистики.
   appearance:none + -webkit-text-fill-color + !important гасят UA-стили
   <button>, из-за которых текст в dark-mode рендерился системным цветом. */
.map2-hlist-batch-delete {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: var(--radius-sm);
  background: #D32F2F !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: inherit;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  /* Плавное появление/исчезновение — opacity + transform. */
  animation: map2HlistBatchAppear 0.18s ease-out;
  transition: filter 0.12s;
}

[data-theme="dark"] .map2-hlist-batch-delete {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.map2-hlist-batch-delete:hover {
  filter: brightness(0.92);
}

@keyframes map2HlistBatchAppear {
  from {
    opacity: 0;
    transform: translateX(6px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.map2-hlist-stats__text {
  color: var(--color-on-surface-secondary);
}

/* ── Бургер-меню (popover) в правом верхнем углу карты ─────────── */
.map2-burger-menu {
  width: 300px;
  max-width: calc(100vw - 16px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 14px;
  color: var(--color-on-surface);
}

.map2-burger-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: inherit;
  font-size: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}

.map2-burger-menu__item:hover:not(:disabled) {
  background: var(--color-bg);
}

.map2-burger-menu__item .material-icons-round {
  font-size: 20px;
  color: var(--color-on-surface-secondary);
  flex: 0 0 auto;
}

.map2-burger-menu__item--disabled,
.map2-burger-menu__item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.map2-burger-menu__item--danger {
  color: #D32F2F;
}

.map2-burger-menu__item--danger .material-icons-round {
  color: #D32F2F;
}

.map2-burger-menu__item--danger:hover:not(:disabled) {
  background: rgba(211, 47, 47, 0.10);
}

/* Праймари-пункт в бургер-меню: без фона, одинаковая с обычными пунктами
   подложка, только текст и иконка подкрашены var(--color-primary). */
.map2-burger-menu__item--primary,
.map2-burger-menu__item--primary .material-icons-round {
  color: var(--color-primary);
}

.map2-burger-menu__label {
  flex: 1 1 auto;
  min-width: 0;
}

/* Оранжевая иконка предупреждения у пункта «Обновить», когда в слое есть
   несохранённые локальные правки. Specificity повышена дополнительным
   классом, чтобы переопределить общий .material-icons-round цвет. */
.map2-burger-menu__item .material-icons-round.map2-burger-menu__warn {
  color: #F57C00;
  font-size: 20px;
  flex: 0 0 auto;
  margin-left: auto;
}
[data-theme="dark"] .map2-burger-menu__item .material-icons-round.map2-burger-menu__warn {
  color: #FFB74D;
}

.map2-burger-menu__header {
  padding: 8px 10px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-on-surface-secondary);
}

.map2-burger-menu__note {
  padding: 10px 12px;
  margin: 4px 6px 8px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-on-surface-secondary);
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: 8px;
}

.map2-burger-menu__divider {
  margin: 6px 8px;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.map2-burger-menu__spin {
  animation: map2BurgerSpin 0.8s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes map2BurgerSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Адаптивность: на узких экранах панель на всю ширину ─────── */
@media (max-width: 900px) {
  .map2-layers-panel,
  .map2-hydrant-panel,
  .map2-hydrant-list-panel,
  .map2-loaded-panel {
    width: 100%;
  }
  /* Верхний блок действий (undo/redo/бургер) — мгновенно. */
  .map2-page.has-map2-layers-panel .map2-top-actions,
  .map2-page.has-map2-hydrant-panel .map2-top-actions,
  .map2-page.has-map2-hydrant-list .map2-top-actions,
  .map2-page.has-map2-loaded-panel .map2-top-actions {
    display: none;
  }
  /* Боковые колонки кнопок плавно уезжают за свой край карты — синхронно
     с появлением выезжающей панели. Сбрасываем сдвиг right, чтобы стек
     гарантированно уходил за правый край viewport, а не оставался под
     панелью. transition определена в map2.css. */
  .map2-page.has-map2-layers-panel .map2-btn-stack--right,
  .map2-page.has-map2-hydrant-panel .map2-btn-stack--right,
  .map2-page.has-map2-hydrant-list .map2-btn-stack--right,
  .map2-page.has-map2-loaded-panel .map2-btn-stack--right {
    right: 12px;
    transform: translate(calc(100% + 24px), -50%);
    opacity: 0;
    pointer-events: none;
  }
  .map2-page.has-map2-layers-panel .map2-btn-stack--left,
  .map2-page.has-map2-hydrant-panel .map2-btn-stack--left,
  .map2-page.has-map2-hydrant-list .map2-btn-stack--left,
  .map2-page.has-map2-loaded-panel .map2-btn-stack--left {
    transform: translate(calc(-100% - 24px), -50%);
    opacity: 0;
    pointer-events: none;
  }
}

/* css/tools/map2-print.css */
/* === Map2 — Режим печати === */
/* Транзитный режим: тулбар сверху + затемнение с A4-вырезом по центру.       */
/* CSS этого файла активен только пока на .map2-page висит модификатор        */
/* --print-mode (см. tools/map2/print.js → map2EnterPrintMode).               */

/* Гасим всю плавающую обвязку карты, чтобы не торчала из затемнения. */
.map2-page--print-mode .map2-top-actions,
.map2-page--print-mode .map2-no-layers-hint,
.map2-page--print-mode .map2-search,
.map2-page--print-mode .map2-load-progress,
.map2-page--print-mode .map2-sync-banner,
.map2-page--print-mode .map2-measure-box {
  display: none !important;
}

/* Боковые колонки кнопок плавно уезжают за свои края — left за левый,
   right за правый. Базовая transition определена в map2.css. */
.map2-page--print-mode .map2-btn-stack {
  opacity: 0;
  pointer-events: none;
}
.map2-page--print-mode .map2-btn-stack--left {
  transform: translate(calc(-100% - 24px), -50%);
}
.map2-page--print-mode .map2-btn-stack--right {
  transform: translate(calc(100% + 24px), -50%);
}

/* Глобальный баннер #global-bottom-ad (см. css/components/tool-slots.css) —
   fixed-overlay внизу центральной панели, общий для всех инструментов.
   В режиме печати плавно уезжает вниз и так же выезжает обратно.
   Класс body.map2-print-active навешивается из tools/map2/print.js. */
#global-bottom-ad {
  transition: left 0.25s ease, right 0.25s ease, bottom 0.25s ease,
              transform 0.3s ease, opacity 0.3s ease;
}
body.map2-print-active #global-bottom-ad {
  transform: translateY(calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
}

/* Локальный map2-ad-slot (внутри .map2-map-wrap) тоже плавно уезжает —
   на странице карт это второй баннер, отображающийся под кнопками. */
.map2-ad-slot {
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.map2-page--print-mode .map2-ad-slot {
  transform: translate(-50%, calc(100% + 40px)) !important;
  opacity: 0;
  pointer-events: none;
}

/* Верхняя плашка-инструкция. Высота как у .tool-toolbar (48px), фон —
   общий фон сайта (var(--color-bg)), чтобы зрительно сливалась с центральной
   зоной приложения и не отвлекала от карты в момент выбора области. */
.map2-print-toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  pointer-events: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.map2-print-toolbar.is-visible { opacity: 1; }

/* Сегмент-переключатель ориентации листа (альбомная / книжная) */
.map2-print-toolbar__orient {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface);
}

.map2-print-orient {
  width: 36px;
  height: 32px;
  background: transparent;
  border: 0;
  color: var(--color-on-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s;
}

.map2-print-orient + .map2-print-orient {
  border-left: 1px solid var(--color-border);
}

.map2-print-orient:hover:not(.map2-print-orient--active) {
  background: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}

.map2-print-orient--active {
  background: var(--color-primary);
  color: #fff;
}

[data-theme="dark"] .map2-print-orient--active {
  color: #000;
}

.map2-print-orient svg {
  width: 18px;
  height: 18px;
}

.map2-print-toolbar__hint {
  flex: 1;
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--color-on-surface);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.map2-print-toolbar__tools {
  display: inline-flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
}

.map2-print-tool-btn {
  width: 36px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-on-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.map2-print-tool-btn:hover:not(.map2-print-tool-btn--active) {
  background: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}

.map2-print-tool-btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

[data-theme="dark"] .map2-print-tool-btn--active {
  color: #000;
}

.map2-print-tool-btn .material-icons-round,
.map2-print-tool-btn .material-icons-outlined,
.map2-print-tool-btn .material-icons {
  font-size: 18px;
}

.map2-print-toolbar__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.map2-print-toolbar__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map2-print-toolbar__actions .btn .material-icons-round {
  font-size: 18px;
}

/* Затемнение с «вырезом» через box-shadow на дочернем .__hole */
.map2-print-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.map2-print-overlay.is-visible { opacity: 1; }

.map2-print-overlay__hole {
  position: absolute;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  border: 2px solid #ffffff;
  border-radius: 2px;
  pointer-events: none;
  transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease;
}

/* Внешний контейнер controls — фиксированно центрируется под рамкой A4.
   Внутри две отдельные плашки в строку: «зум карты» (слева) и
   «масштаб + примеры маркеров» (справа). Position absolute задаётся
   динамически из tools/map2/print.js — `top` подгоняется под рамку. */
.map2-print-controls-wrap {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none; /* реальные клики проходят к panels */
  opacity: 0;
  transition: top 0.18s ease, opacity 0.3s ease;
}
.map2-print-controls-wrap.is-visible { opacity: 1; }

/* Плашки controls. Position static — реальные размеры даёт wrap. */
.map2-print-controls {
  position: static;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  pointer-events: auto;
}

/* Без flex-direction column — теперь scale-плашка содержит только
   слайдер (примеры переехали в overlay-полосу внутри рамки A4). */

/* Кнопки зума карты — БЕЗ внешнего контейнера/подложки. Каждая кнопка
   самостоятельная (своя подложка + тень), просто стоят рядом. */
.map2-print-zoom-group {
  display: inline-flex;
  gap: 6px;
  pointer-events: auto;
}

.map2-print-zoom-btn {
  width: 40px;
  height: 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  color: var(--color-on-surface);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.15s ease;
}

.map2-print-zoom-btn:hover {
  background: color-mix(in srgb, var(--color-on-surface) 6%, var(--color-surface));
}

.map2-print-zoom-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.map2-print-controls__scale {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--color-on-surface);
}

.map2-print-controls__scale input[type="range"] {
  width: 160px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Сегментный переключатель «С фоном / Без фона» — рядом со слайдером. */
.map2-print-controls__frame {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  pointer-events: auto;
}

.map2-print-frame-btn {
  background: var(--color-surface);
  color: var(--color-on-surface);
  border: none;
  padding: 6px 10px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.map2-print-frame-btn + .map2-print-frame-btn {
  border-left: 1px solid var(--color-border);
}

.map2-print-frame-btn:hover {
  background: color-mix(in srgb, var(--color-on-surface) 6%, var(--color-surface));
}

.map2-print-frame-btn.is-active {
  background: var(--color-primary);
  color: #fff;
}

[data-theme="dark"] .map2-print-frame-btn.is-active {
  color: #000;
}

/* Полоса с примерами маркеров — overlay поверх карты, прижатая к нижней
   кромке рамки A4. Сама полоса БЕЗ фона: белая подложка только у
   подзаголовка (плашка с закруглёнными углами). Position/размер задаются
   динамически из print.js (_mp_positionExamplesStrip). */
.map2-print-examples-strip {
  position: absolute;
  z-index: 9; /* выше .map2-print-overlay (7), ниже toolbar (8)/controls (9) */
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 4px 8px 6px;
  pointer-events: none; /* карту под полосой можно панить и зумить */
  opacity: 0;
  transition: left 0.18s ease, top 0.18s ease,
              width 0.18s ease, height 0.18s ease,
              opacity 0.3s ease;
}
.map2-print-examples-strip.is-visible { opacity: 1; }

.map2-print-examples {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  pointer-events: auto;
}

.map2-print-examples__title {
  font-size: 11px;
  font-weight: 600;
  color: #000;
  background: #ffffff;
  border-radius: 8px;
  padding: 2px 10px;
  align-self: flex-start;
  white-space: nowrap;
}

.map2-print-examples__row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 44px;
}

.map2-print-examples__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  background: transparent;
}

.map2-print-examples__item img {
  display: block;
  max-height: 48px;
  max-width: 140px;
  width: auto;
  height: auto;
  background: transparent;
}

/* Боковые панели приложения уезжают вправо/влево, центральная зона
   занимает всё пространство. Анимация — за счёт уже существующего
   transition grid-template-columns: 0.25s в css/core/layout.css. */
body.map2-print-active {
  --sidebar-left-width: 0px;
  --sidebar-left-collapsed-width: 0px;
  --sidebar-right-width: 0px;
  --sidebar-right-collapsed-width: 0px;
}

body.map2-print-active #sidebar-left,
body.map2-print-active #sidebar-right {
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* ───── Модалка предпросмотра подготовленного изображения ───── */

.map2-print-preview {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
}

.map2-print-preview__bar {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.map2-print-preview__title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.map2-print-preview__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.map2-print-preview__actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.map2-print-preview__actions .btn .material-icons-round {
  font-size: 18px;
}

.map2-print-preview__body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  padding: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* Viewport — overflow hidden, drag/zoom через transform на <img>. */
.map2-print-preview__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.map2-print-preview__viewport.is-grabbing {
  cursor: grabbing;
}

.map2-print-preview__img {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  background: #fff;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
  /* Размер определяется transform: scale(...), а не max-*. */
  max-width: none;
  max-height: none;
}

/* Сегмент-кнопки зума в тулбаре превью */
.map2-print-preview__zoom {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg);
  flex-shrink: 0;
}

.map2-print-preview__zoom button {
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: var(--color-on-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 600;
  padding: 0;
}

.map2-print-preview__zoom button + button {
  border-left: 1px solid var(--color-border);
}

.map2-print-preview__zoom button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}

.map2-print-preview__zoom button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.map2-print-preview__zoom button .material-icons-round {
  font-size: 20px;
}

.map2-print-preview__busy {
  color: #fff;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.map2-print-preview__busy .material-icons-round {
  font-size: 24px;
  animation: map2-print-spin 1s linear infinite;
}

@keyframes map2-print-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* vendor/tabulator/tabulator_modern.min.css */
.tabulator{background-color:#fff;border:1px solid #fff;font-size:16px;overflow:hidden;position:relative;text-align:left;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.tabulator[tabulator-layout=fitDataFill] .tabulator-tableholder .tabulator-table{min-width:100%}.tabulator[tabulator-layout=fitDataTable]{display:inline-block}.tabulator.tabulator-block-select,.tabulator.tabulator-ranges .tabulator-cell:not(.tabulator-editing){user-select:none}.tabulator .tabulator-header{background-color:#fff;border-bottom:1px solid #3759d7;box-sizing:border-box;color:#3759d7;font-weight:700;outline:none;overflow:hidden;position:relative;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap;width:100%}.tabulator .tabulator-header.tabulator-header-hidden{display:none}.tabulator .tabulator-header .tabulator-header-contents{overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers{display:inline-block}.tabulator .tabulator-header .tabulator-col{background:#fff;border-right:1px solid #fff;box-sizing:border-box;display:inline-flex;flex-direction:column;justify-content:flex-start;overflow:hidden;position:relative;text-align:left;vertical-align:bottom}.tabulator .tabulator-header .tabulator-col.tabulator-moving{background:#e6e6e6;border:1px solid #3759d7;pointer-events:none;position:absolute}.tabulator .tabulator-header .tabulator-col.tabulator-range-highlight{background-color:#3759d7;color:#fff}.tabulator .tabulator-header .tabulator-col.tabulator-range-selected{background-color:#2544b7;color:#fff}.tabulator .tabulator-header .tabulator-col .tabulator-col-content{box-sizing:border-box;padding:4px;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button{padding:0 8px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-header-popup-button:hover{cursor:pointer;opacity:.6}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder{position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title.tabulator-col-title-wrap{text-overflow:clip;white-space:normal}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor{background:#fff;border:1px solid #999;box-sizing:border-box;padding:1px;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-header-popup-button+.tabulator-title-editor{width:calc(100% - 22px)}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{align-items:center;bottom:0;display:flex;position:absolute;right:4px;top:0}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #b7c3f1;border-left:6px solid transparent;border-right:6px solid transparent;height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:1px solid #fff;display:flex;margin-right:-1px;overflow:hidden;position:relative}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter{box-sizing:border-box;margin-top:2px;position:relative;text-align:center;width:100%}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea{height:auto!important}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg{margin-top:3px}.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear{height:0;width:0}.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-right:25px}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover{background-color:#e6e6e6;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter{color:#b7c3f1}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-bottom:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #b7c3f1;border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter{color:#3759d7}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-bottom:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:6px solid #3759d7;border-top:none}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter{color:#3759d7}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter.tabulator-col-sorter-element .tabulator-arrow:hover{border-top:6px solid #555;cursor:pointer}}.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{border-bottom:none;border-top:6px solid #3759d7;color:#3759d7}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-content .tabulator-col-title{align-items:center;display:flex;justify-content:center;text-orientation:mixed;writing-mode:vertical-rl}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip .tabulator-col-title{transform:rotate(180deg)}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-title{padding-right:0;padding-top:20px}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip .tabulator-col-title{padding-bottom:20px;padding-right:0}.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-sorter{bottom:auto;justify-content:center;left:0;right:0;top:4px}.tabulator .tabulator-header .tabulator-frozen{left:0;position:sticky;z-index:11}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{border-right:2px solid #fff}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right{border-left:2px solid #fff}.tabulator .tabulator-header .tabulator-calcs-holder{background:#fff!important;border-bottom:1px solid #fff;border-top:1px solid #fff;box-sizing:border-box;display:inline-block}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row{background:#fff!important}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle{display:none}.tabulator .tabulator-header .tabulator-frozen-rows-holder{display:inline-block}.tabulator .tabulator-header .tabulator-frozen-rows-holder:empty{display:none}.tabulator .tabulator-tableholder{-webkit-overflow-scrolling:touch;overflow:auto;position:relative;white-space:nowrap;width:100%}.tabulator .tabulator-tableholder:focus{outline:none}.tabulator .tabulator-tableholder .tabulator-placeholder{align-items:center;box-sizing:border-box;display:flex;justify-content:center;min-width:100%;width:100%}.tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode=virtual]{min-height:100%}.tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents{color:#ccc;display:inline-block;font-size:20px;font-weight:700;padding:10px;text-align:center;white-space:normal}.tabulator .tabulator-tableholder .tabulator-table{background-color:#f3f3f3;color:#333;display:inline-block;overflow:visible;position:relative;white-space:nowrap}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs{background:#f2f2f2!important;font-weight:700}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top{border-bottom:2px solid #fff}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{border-top:2px solid #fff}.tabulator .tabulator-tableholder .tabulator-range-overlay{inset:0;pointer-events:none;position:absolute;z-index:10}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range{border:1px solid #2544b7;box-sizing:border-box;position:absolute}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active:after{background-color:#2544b7;border-radius:999px;bottom:-3px;content:"";height:6px;position:absolute;right:-3px;width:6px}.tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range-cell-active{border:2px solid #2544b7;box-sizing:border-box;position:absolute}.tabulator .tabulator-footer{background-color:#fff;border-top:1px solid #999;color:#3759d7;font-weight:700;user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;white-space:nowrap}.tabulator .tabulator-footer .tabulator-footer-contents{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding:5px 10px}.tabulator .tabulator-footer .tabulator-footer-contents:empty{display:none}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs{margin-top:-5px;overflow-x:auto}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{border:1px solid #fff;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:none;display:inline-block;font-size:.9em;padding:5px}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab:hover{cursor:pointer;opacity:.7}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active{background:#fff}.tabulator .tabulator-footer .tabulator-calcs-holder{background:#fff!important;border-bottom:1px solid #fff;border-top:1px solid #fff;box-sizing:border-box;overflow:hidden;text-align:left;width:100%}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{display:inline-block}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle{display:none}.tabulator .tabulator-footer .tabulator-calcs-holder:only-child{border-bottom:none;margin-bottom:-5px}.tabulator .tabulator-footer>*+.tabulator-page-counter{margin-left:10px}.tabulator .tabulator-footer .tabulator-page-counter{font-weight:400}.tabulator .tabulator-footer .tabulator-paginator{color:#3759d7;flex:1;font-family:inherit;font-size:inherit;font-weight:inherit;text-align:right}.tabulator .tabulator-footer .tabulator-page-size{border:1px solid #aaa;border-radius:3px;display:inline-block;margin:0 5px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-pages{margin:0 7px}.tabulator .tabulator-footer .tabulator-page{background:hsla(0,0%,100%,.2);border:1px solid #aaa;border-radius:3px;display:inline-block;margin:0 2px;padding:2px 5px}.tabulator .tabulator-footer .tabulator-page.active{color:#3759d7}.tabulator .tabulator-footer .tabulator-page:disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-footer .tabulator-page:not(disabled):hover{background:rgba(0,0,0,.2);color:#fff;cursor:pointer}}.tabulator .tabulator-col-resize-handle{display:inline-block;margin-left:-3px;margin-right:-3px;position:relative;vertical-align:middle;width:6px;z-index:11}@media (hover:hover) and (pointer:fine){.tabulator .tabulator-col-resize-handle:hover{cursor:ew-resize}}.tabulator .tabulator-col-resize-handle:last-of-type{margin-right:0;width:3px}.tabulator .tabulator-col-resize-guide{background-color:#999;height:100%;margin-left:-.5px;opacity:.5;position:absolute;top:0;width:4px}.tabulator .tabulator-row-resize-guide{background-color:#999;height:4px;left:0;margin-top:-.5px;opacity:.5;position:absolute;width:100%}.tabulator .tabulator-alert{align-items:center;background:rgba(0,0,0,.4);display:flex;height:100%;left:0;position:absolute;text-align:center;top:0;width:100%;z-index:100}.tabulator .tabulator-alert .tabulator-alert-msg{background:#fff;border-radius:10px;display:inline-block;font-size:16px;font-weight:700;margin:0 auto;padding:10px 20px}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg{border:4px solid #333;color:#000}.tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error{border:4px solid #d00;color:#590000}.tabulator-row{background-color:#f3f3f3;box-sizing:border-box;min-height:24px;position:relative}.tabulator-row.tabulator-row-even{background-color:#fff}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selectable:hover{background-color:#bbb;cursor:pointer}}.tabulator-row.tabulator-selected{background-color:#9abcea}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selected:hover{background-color:#769bcc;cursor:pointer}}.tabulator-row.tabulator-row-moving{background:#fff;border:1px solid #000}.tabulator-row.tabulator-moving{border-bottom:1px solid #fff;border-top:1px solid #fff;pointer-events:none;position:absolute;z-index:15}.tabulator-row.tabulator-range-highlight .tabulator-cell.tabulator-range-row-header{background-color:#3759d7;color:#fff}.tabulator-row.tabulator-range-highlight.tabulator-range-selected .tabulator-cell.tabulator-range-row-header,.tabulator-row.tabulator-range-selected .tabulator-cell.tabulator-range-row-header{background-color:#2544b7;color:#fff}.tabulator-row .tabulator-row-resize-handle{bottom:0;height:5px;left:0;position:absolute;right:0}.tabulator-row .tabulator-row-resize-handle.prev{bottom:auto;top:0}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-row-resize-handle:hover{cursor:ns-resize}}.tabulator-row .tabulator-responsive-collapse{border-bottom:1px solid #fff;border-top:1px solid #fff;box-sizing:border-box;padding:5px}.tabulator-row .tabulator-responsive-collapse:empty{display:none}.tabulator-row .tabulator-responsive-collapse table{font-size:16px}.tabulator-row .tabulator-responsive-collapse table tr td{position:relative}.tabulator-row .tabulator-responsive-collapse table tr td:first-of-type{padding-right:10px}.tabulator-row .tabulator-cell{border-right:1px solid #fff;box-sizing:border-box;display:inline-block;outline:none;overflow:hidden;padding:4px;position:relative;text-overflow:ellipsis;vertical-align:middle;white-space:nowrap}.tabulator-row .tabulator-cell.tabulator-row-header{background:#fff;border-bottom:1px solid #fff;border-right:1px solid #fff}.tabulator-row .tabulator-cell.tabulator-frozen{background-color:inherit;display:inline-block;left:0;position:sticky;z-index:11}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-right:2px solid #fff}.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-left:2px solid #fff}.tabulator-row .tabulator-cell.tabulator-editing{border:1px solid #1d68cd;outline:none;padding:0}.tabulator-row .tabulator-cell.tabulator-editing input,.tabulator-row .tabulator-cell.tabulator-editing select{background:transparent;border:1px;outline:none}.tabulator-row .tabulator-cell.tabulator-validation-fail{border:1px solid #d00}.tabulator-row .tabulator-cell.tabulator-validation-fail input,.tabulator-row .tabulator-cell.tabulator-validation-fail select{background:transparent;border:1px;color:#d00}.tabulator-row .tabulator-cell.tabulator-row-handle{align-items:center;display:inline-flex;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box{width:80%}.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar{background:#666;height:3px;margin-top:2px;width:100%}.tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected):not(.tabulator-range-row-header){background-color:#9abcea}.tabulator-row .tabulator-cell .tabulator-data-tree-branch-empty{display:inline-block;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom:2px solid #fff;border-bottom-left-radius:1px;border-left:2px solid #fff;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-control{align-items:center;background:rgba(0,0,0,.1);border:1px solid #333;border-radius:2px;display:inline-flex;height:11px;justify-content:center;margin-right:5px;overflow:hidden;vertical-align:middle;width:11px}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-data-tree-control:hover{background:rgba(0,0,0,.2);cursor:pointer}}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:transparent;display:inline-block;height:7px;position:relative;width:1px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;display:inline-block;height:7px;position:relative;width:1px}.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle{align-items:center;background:#666;border-radius:20px;color:#f3f3f3;display:inline-flex;font-size:1.1em;font-weight:700;height:15px;justify-content:center;-moz-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;width:15px}@media (hover:hover) and (pointer:fine){.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover{cursor:pointer;opacity:.7}}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-close{display:initial}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-open{display:none}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg{stroke:#f3f3f3}.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close{display:none}.tabulator-row .tabulator-cell .tabulator-traffic-light{border-radius:14px;display:inline-block;height:14px;width:14px}.tabulator-row.tabulator-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #fff;border-top:1px solid #999;box-sizing:border-box;font-weight:700;padding:5px 5px 5px 10px}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-group:hover{background-color:rgba(0,0,0,.1);cursor:pointer}}.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow{border-bottom:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #3759d7;margin-right:10px}.tabulator-row.tabulator-group.tabulator-group-level-1{padding-left:30px}.tabulator-row.tabulator-group.tabulator-group-level-2{padding-left:50px}.tabulator-row.tabulator-group.tabulator-group-level-3{padding-left:70px}.tabulator-row.tabulator-group.tabulator-group-level-4{padding-left:90px}.tabulator-row.tabulator-group.tabulator-group-level-5{padding-left:110px}.tabulator-row.tabulator-group .tabulator-group-toggle{display:inline-block}.tabulator-row.tabulator-group .tabulator-arrow{border-bottom:6px solid transparent;border-left:6px solid #3759d7;border-right:0;border-top:6px solid transparent;display:inline-block;height:0;margin-right:16px;vertical-align:middle;width:0}.tabulator-row.tabulator-group span{color:#d00;margin-left:10px}.tabulator-toggle{background:#dcdcdc;border:1px solid #ccc;box-sizing:border-box;display:flex;flex-direction:row}.tabulator-toggle.tabulator-toggle-on{background:#1c6cc2}.tabulator-toggle .tabulator-toggle-switch{background:#fff;border:1px solid #ccc;box-sizing:border-box}.tabulator-popup-container{-webkit-overflow-scrolling:touch;background:#f3f3f3;border:1px solid #fff;box-shadow:0 0 5px 0 rgba(0,0,0,.2);box-sizing:border-box;display:inline-block;font-size:16px;overflow-y:auto;position:absolute;z-index:10000}.tabulator-popup{border-radius:3px;padding:5px}.tabulator-tooltip{border-radius:2px;box-shadow:none;font-size:12px;max-width:Min(500px,100%);padding:3px 5px;pointer-events:none}.tabulator-menu .tabulator-menu-item{box-sizing:border-box;padding:5px 10px;position:relative;user-select:none}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled{opacity:.5}@media (hover:hover) and (pointer:fine){.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover{background:#fff;cursor:pointer}}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu{padding-right:25px}.tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu:after{border-color:#fff;border-style:solid;border-width:1px 1px 0 0;content:"";display:inline-block;height:7px;position:absolute;right:10px;top:calc(5px + .4em);transform:rotate(45deg);vertical-align:top;width:7px}.tabulator-menu .tabulator-menu-separator{border-top:1px solid #fff}.tabulator-edit-list{-webkit-overflow-scrolling:touch;font-size:16px;max-height:200px;overflow-y:auto}.tabulator-edit-list .tabulator-edit-list-item{color:#333;outline:none;padding:4px}.tabulator-edit-list .tabulator-edit-list-item.active{background:#1d68cd;color:#f3f3f3}.tabulator-edit-list .tabulator-edit-list-item.active.focused{outline:1px solid hsla(0,0%,95%,.5)}.tabulator-edit-list .tabulator-edit-list-item.focused{outline:1px solid #1d68cd}@media (hover:hover) and (pointer:fine){.tabulator-edit-list .tabulator-edit-list-item:hover{background:#1d68cd;color:#f3f3f3;cursor:pointer}}.tabulator-edit-list .tabulator-edit-list-placeholder{color:#333;padding:4px;text-align:center}.tabulator-edit-list .tabulator-edit-list-group{border-bottom:1px solid #fff;color:#333;font-weight:700;padding:6px 4px 4px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-2,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-2{padding-left:12px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-3,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-3{padding-left:20px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-4,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-4{padding-left:28px}.tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-5,.tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-5{padding-left:36px}.tabulator.tabulator-ltr{direction:ltr}.tabulator.tabulator-rtl{direction:rtl;text-align:initial}.tabulator.tabulator-rtl .tabulator-header .tabulator-col{border-left:1px solid #fff;border-right:initial;text-align:initial}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{margin-left:-1px;margin-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title{padding-left:25px;padding-right:0}.tabulator.tabulator-rtl .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter{left:8px;right:auto}.tabulator.tabulator-rtl .tabulator-tableholder .tabulator-range-overlay .tabulator-range.tabulator-range-active:after{background-color:#2544b7;border-radius:999px;bottom:-3px;content:"";height:6px;left:-3px;position:absolute;right:auto;width:6px}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell{border-left:1px solid #fff;border-right:initial}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch{border-bottom-left-radius:0;border-bottom-right-radius:1px;border-left:initial;border-right:2px solid #fff;margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-control{margin-left:5px;margin-right:0}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left{border-left:2px solid #fff}.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right{border-right:2px solid #fff}.tabulator.tabulator-rtl .tabulator-row .tabulator-col-resize-handle:last-of-type{margin-left:0;margin-right:-3px;width:3px}.tabulator.tabulator-rtl .tabulator-footer .tabulator-calcs-holder{text-align:initial}.tabulator-print-fullscreen{bottom:0;left:0;position:absolute;right:0;top:0;z-index:10000}body.tabulator-print-fullscreen-hide>:not(.tabulator-print-fullscreen){display:none!important}.tabulator-print-table{border-collapse:collapse}.tabulator-print-table .tabulator-data-tree-branch{border-bottom:2px solid #fff;border-bottom-left-radius:1px;border-left:2px solid #fff;display:inline-block;height:9px;margin-right:5px;margin-top:-9px;vertical-align:middle;width:7px}.tabulator-print-table .tabulator-print-table-group{background:#ccc;border-bottom:1px solid #999;border-right:1px solid #fff;border-top:1px solid #999;box-sizing:border-box;font-weight:700;min-width:100%;padding:5px 5px 5px 10px}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-print-table-group:hover{background-color:rgba(0,0,0,.1);cursor:pointer}}.tabulator-print-table .tabulator-print-table-group.tabulator-group-visible .tabulator-arrow{border-bottom:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #3759d7;margin-right:10px}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-1 td{padding-left:30px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-2 td{padding-left:50px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-3 td{padding-left:70px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-4 td{padding-left:90px!important}.tabulator-print-table .tabulator-print-table-group.tabulator-group-level-5 td{padding-left:110px!important}.tabulator-print-table .tabulator-print-table-group .tabulator-group-toggle{display:inline-block}.tabulator-print-table .tabulator-print-table-group .tabulator-arrow{border-bottom:6px solid transparent;border-left:6px solid #3759d7;border-right:0;border-top:6px solid transparent;display:inline-block;height:0;margin-right:16px;vertical-align:middle;width:0}.tabulator-print-table .tabulator-print-table-group span{color:#d00;margin-left:10px}.tabulator-print-table .tabulator-data-tree-control{align-items:center;background:rgba(0,0,0,.1);border:1px solid #333;border-radius:2px;display:inline-flex;height:11px;justify-content:center;margin-right:5px;overflow:hidden;vertical-align:middle;width:11px}@media (hover:hover) and (pointer:fine){.tabulator-print-table .tabulator-data-tree-control:hover{background:rgba(0,0,0,.2);cursor:pointer}}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse{background:transparent;display:inline-block;height:7px;position:relative;width:1px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand{background:#333;display:inline-block;height:7px;position:relative;width:1px}.tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after{background:#333;content:"";height:1px;left:-3px;position:absolute;top:3px;width:7px}.tabulator .tabulator-header{border-bottom:3px solid #3759d7;font-size:1.1em;margin-bottom:4px;padding-left:10px}.tabulator .tabulator-header .tabulator-col{background-color:#fff;border-right:2px solid #fff}.tabulator .tabulator-header .tabulator-col:first-child{padding-left:10px}.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor{border:1px solid #3759d7;color:#3759d7;font-size:1em}.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols{border-top:2px solid #3759d7}.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left{padding-left:10px}.tabulator .tabulator-header .tabulator-calcs-holder{border-top:2px solid #3759d7!important}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row{padding-left:0!important}.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-cell{background:none}.tabulator .tabulator-tableholder .tabulator-placeholder span{color:#3759d7}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top{border-bottom:2px solid #3759d7}.tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom{border-top:2px solid #3759d7}.tabulator .tabulator-footer .tabulator-calcs-holder{border-bottom:2px solid #3759d7!important;border-top:3px solid #3759d7!important}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row{background:#fff!important}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-cell{background:none}.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-cell:first-child{border-left:10px solid transparent}.tabulator .tabulator-footer .tabulator-calcs-holder:only-child{border-bottom:none!important}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab{border-color:#aaa;color:#333;font-weight:400}.tabulator .tabulator-footer .tabulator-spreadsheet-tabs .tabulator-spreadsheet-tab.tabulator-spreadsheet-tab-active{color:#3759d7;font-weight:700}.tabulator-row{margin-bottom:2px}.tabulator-row .tabulator-cell:first-child{border-left:10px solid #3759d7}.tabulator-row .tabulator-cell.tabulator-row-header{background-color:#3759d7;color:#fff}.tabulator-row:nth-child(2n){background-color:#627ce0}.tabulator-row:nth-child(2n) .tabulator-cell{background-color:#fff}.tabulator-row:nth-child(2n) .tabulator-cell:first-child{border-left:10px solid #627ce0}.tabulator-row:nth-child(2n) .tabulator-cell.tabulator-row-header{background-color:#627ce0}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selectable:hover{cursor:pointer}.tabulator-row.tabulator-selectable:hover .tabulator-cell{background-color:#bbb}}.tabulator-row.tabulator-selected .tabulator-cell{background-color:#9abcea}@media (hover:hover) and (pointer:fine){.tabulator-row.tabulator-selected:hover .tabulator-cell{background-color:#769bcc;cursor:pointer}}.tabulator-row.tabulator-moving{pointer-events:none!important}.tabulator-row .tabulator-cell{background-color:#f3f3f3;border-right:2px solid #fff;padding:6px 4px}.tabulator-row.tabulator-group{background:#8ca0e8;border-bottom:2px solid #3759d7;border-right:none;border-top:2px solid #3759d7;margin-bottom:2px;min-width:100%}.tabulator-row.tabulator-group span{color:#3759d7}.tabulator-toggle.tabulator-toggle-on{background:#3759d7}.tabulator-edit-select-list{border:1px solid #1d68cd}.tabulator-print-table .tabulator-print-table-group{background:#8ca0e8;border-bottom:2px solid #3759d7;border-top:2px solid #3759d7;margin-bottom:2px}.tabulator-print-table .tabulator-print-table-group span{color:#3759d7}

/* css/tools/map2-table-tabulator.css */
/* === map2: табличный редактор меток на Tabulator v6 === */
/* Оверрайды темы tabulator_modern под Material 3 палитру проекта.
   Appbar + busy-overlay + close-confirm оставлены внутри этого файла,
   чтобы стили табличного редактора жили вместе.

   Визуальные цели — соответствие прежней кастомной таблице:
     • шрифт 13px, header 12px/600
     • header фон = primary 12% на surface; активная сортировка = primary 35%
     • row hover = primary 6%; row-even = on-surface 3% overlay
     • focus-within на ряду = inset shadow primary 55% сверху/снизу
     • dirty cell = primary 30%; status-подложка ok/bad/warn как раньше
     • edit cell = primary 10% подложка + 2px primary рамка внутрь. */

.map2-table-editor {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  color: var(--color-on-surface);
  /* Анимация выезда справа — как у других боковых панелей («База
     водоисточников», «Загруженные слои»), только без ограничения ширины. */
  animation: map2TableSlideIn 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes map2TableSlideIn {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Аппбар — как у остальных панелей карты: фон surface. */
.map2-table-editor__appbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin-right: 6px;
  padding: 0 8px 0 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}
.map2-table-editor__appbar-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.map2-table-editor__actions {
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transform: translateX(-8px);
  pointer-events: none;
  transition:
    max-width 0.2s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}
.map2-table-editor__actions.is-visible {
  max-width: 280px;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.map2-table-editor__appbar-left .btn,
.map2-table-editor__delete,
.map2-table-editor__csv,
.map2-table-editor__add {
  height: 30px;
  min-height: 30px;
  font-size: 12px;
  box-sizing: border-box;
}
.map2-table-editor__appbar-left .btn {
  padding-top: 0;
  padding-bottom: 0;
}
#map2-tbl-undo,
#map2-tbl-redo {
  width: 30px;
  min-width: 30px;
  padding-left: 0;
  padding-right: 0;
}
/* Save — плавное появление при наличии правок, исчезание после save/undo.
   Одинаковый pattern с delete: max-width + opacity + padding анимируются. */
.map2-table-editor__save {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  color: var(--color-primary);
  background: transparent;
  overflow: hidden;
  max-width: 0;
  min-width: 0;
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  pointer-events: none;
  transition:
    max-width 0.2s ease,
    opacity 0.18s ease,
    padding 0.2s ease,
    border-width 0.2s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.map2-table-editor__save.is-visible {
  max-width: 140px;
  opacity: 1;
  padding-left: 10px;
  padding-right: 10px;
  border-width: 1px;
  pointer-events: auto;
}
.map2-table-editor__save .material-icons-round {
  font-size: 16px;
  flex: 0 0 auto;
}
.map2-table-editor__save:hover:not([disabled]) {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  color: var(--color-primary);
}

.map2-table-editor__title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Мета-часть в скобках (например «(42 из 128)», «(только чтение)») —
   обычным начертанием и с прозрачностью, чтобы читалась как вспомогательная. */
.map2-table-editor__title-meta {
  font-weight: 400;
  color: var(--color-on-surface-secondary);
  opacity: 0.7;
}

.map2-table-editor__search {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 260px;
  max-width: 40%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  flex-shrink: 0;
}
.map2-table-editor__search-icon {
  font-size: 18px;
  color: var(--color-on-surface-secondary);
}
.map2-table-editor__search-input {
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 13px;
  flex: 1;
  min-width: 0;
}
/* Убираем нативный крестик браузера у <input type="search"> */
.map2-table-editor__search-input::-webkit-search-cancel-button,
.map2-table-editor__search-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.map2-table-editor__csv {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: color-mix(in srgb, #188a42 70%, transparent);
  color: #188a42;
  background: transparent;
  padding-left: 10px;
  padding-right: 10px;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.map2-table-editor__csv .material-icons-round {
  font-size: 16px;
  flex: 0 0 auto;
}
.map2-table-editor__csv:hover:not([disabled]) {
  background: color-mix(in srgb, #188a42 18%, transparent);
  border-color: color-mix(in srgb, #188a42 76%, transparent);
  color: #188a42;
}

.map2-table-editor__add {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  color: var(--color-primary);
  background: transparent;
  overflow: hidden;
  max-width: 0;
  min-width: 0;
  opacity: 0;
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  pointer-events: none;
  transition:
    max-width 0.2s ease,
    opacity 0.18s ease,
    padding 0.2s ease,
    border-width 0.2s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.map2-table-editor__add.is-visible {
  max-width: 160px;
  opacity: 1;
  padding-left: 10px;
  padding-right: 10px;
  border-width: 1px;
  pointer-events: auto;
}
.map2-table-editor__add .material-icons-round {
  font-size: 16px;
  flex: 0 0 auto;
}
.map2-table-editor__add:hover:not([disabled]) {
  background: color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 70%, transparent);
  color: var(--color-primary);
}

.map2-table-editor__delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-color: color-mix(in srgb, #d64545 70%, transparent);
  color: #d64545;
  background: transparent;
  overflow: hidden;
  max-width: 0;
  min-width: 0;
  opacity: 0;
  transform: translateX(8px);
  padding-left: 0;
  padding-right: 0;
  border-width: 0;
  pointer-events: none;
  transition:
    max-width 0.2s ease,
    opacity 0.18s ease,
    transform 0.18s ease,
    padding 0.2s ease,
    border-width 0.2s ease,
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.map2-table-editor__delete.is-visible {
  max-width: 260px;
  opacity: 1;
  transform: translateX(0);
  padding-left: 10px;
  padding-right: 10px;
  border-width: 1px;
  pointer-events: auto;
}
.map2-table-editor__delete .material-icons-round {
  font-size: 16px;
  flex: 0 0 auto;
}
.map2-table-editor__delete-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map2-table-editor__delete:hover:not([disabled]) {
  background: color-mix(in srgb, #d64545 20%, transparent);
  border-color: color-mix(in srgb, #d64545 70%, transparent);
  color: #d64545;
}

.map2-table-editor__close,
.map2-table-editor__filters {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.map2-table-editor__close:hover,
.map2-table-editor__filters:hover {
  background: var(--color-hover);
  color: var(--color-on-surface);
}
.map2-table-editor__filters .material-icons-round { font-size: 20px; }

/* Ячейка координат: текст + иконка-мишень справа. */
.map2-tbl-coords-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.map2-tbl-coords-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.map2-tbl-coords-pick {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* Резервируем место всегда, показываем только при hover на ячейке —
     ширина колонки из-за этого не меняется (visibility сохраняет layout). */
  visibility: hidden;
  transition: background 0.15s, color 0.15s;
}
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-col-coords:hover .map2-tbl-coords-pick {
  visibility: visible;
}
.map2-tbl-coords-pick:hover {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
}
.map2-tbl-coords-pick .material-icons-round { font-size: 16px; }

/* Инвалидные координаты: красная подсветка всей ячейки + иконка-ошибка слева
   с тултипом. Пользователю нужно исправить, иначе новая строка не
   превратится в маркер при сохранении. */
/* Инвалидные координаты: только красная рамка (без фоновой подложки),
   иконка-ошибка слева с мгновенным тултипом. */
.map2-tbl-coords-error {
  flex: 0 0 auto;
  font-size: 16px !important;
  color: #d64545;
  cursor: help;
}
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-coords-invalid {
  box-shadow: inset 0 0 0 1px #d64545;
}

/* Плавающий тултип (мгновенный и с задержкой — один и тот же стиль). Первая
   строка (`__title`) — полужирная, остальной текст (`__body`) идёт ниже с
   сохранением переносов. */
.map2-tbl-tooltip {
  position: fixed;
  z-index: 10000;
  max-width: 340px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-on-surface);
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 2px 8px color-mix(in srgb, #000 18%, transparent);
  pointer-events: none;
  white-space: normal;
}
.map2-tbl-tooltip__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
  margin-bottom: 4px;
}
.map2-tbl-tooltip__body {
  color: color-mix(in srgb, var(--color-on-surface) 85%, transparent);
  white-space: pre-line;
}
/* Тултип cell-контента — показывает полное значение ячейки на hover.
   Сохраняет переносы строк (pre-line) + обрывает длинные слова/URL'ы. */
.map2-tbl-tooltip--cell {
  white-space: pre-line;
  word-break: break-word;
  max-width: 480px;
}

/* Редактор координат — в самой ячейке при edit. Убираем лишние рамки, чтобы
   Tabulator показывал свой стандартный edit-контур. */
.map2-tbl-coords-editor {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  box-sizing: border-box;
}

/* ────────── Кастомный текстовый редактор ячеек ──────────
   Textarea, авто-растущая по высоте при вводе многострочного текста.
   Используется для `text` и `image` колонок (см. _map2TableTextEditor). */
.map2-tbl-text-editor {
  width: 100%;
  min-height: 20px;
  border: 0;
  outline: 0;
  padding: 4px 6px;
  resize: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  box-sizing: border-box;
  overflow: hidden;
}

/* Кнопка-чип «Файл ×» в cell-formatter'е image-колонки. Видна всегда,
   пока к ячейке прикреплён файл (в отличие от hover-иконок). */
.map2-tbl-file-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  padding: 0 4px 0 6px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 60%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s;
}
.map2-tbl-file-chip:hover {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.map2-tbl-file-chip__icon {
  font-size: 14px !important;
  line-height: 1;
}
.map2-tbl-file-chip__label { line-height: 1; }
.map2-tbl-file-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--color-primary);
  cursor: pointer;
  transition: background 0.12s;
}
.map2-tbl-file-chip__remove:hover {
  background: color-mix(in srgb, var(--color-primary) 25%, transparent);
}

/* ────────── Progress-модалка сохранения ──────────
   Непрерываемая модалка с затемнением всей страницы. Блокирует клики на
   таблице и за её пределами до завершения save / ошибки / таймаута. */
.map2-tbl-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: wait;
  animation: map2TableProgressIn 0.15s ease-out;
}
@keyframes map2TableProgressIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.map2-tbl-progress {
  min-width: 220px;
  max-width: 360px;
  padding: 22px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  color: var(--color-on-surface);
  text-align: center;
  cursor: default;
}
.map2-tbl-progress__spinner {
  width: 28px;
  height: 28px;
  border: 3px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  margin: 0 auto 12px;
  animation: map2-table-spin 0.8s linear infinite;
}
.map2-tbl-progress__text {
  font-size: 14px;
  font-weight: 600;
}
.map2-tbl-progress__sub {
  margin-top: 6px;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-on-surface) 70%, transparent);
  word-break: break-word;
}

/* Активный coord picker: прячем таблицу, правую колонку кнопок и верхнюю
   панель действий (меню слоёв + undo/redo). Левая колонка остаётся — зум,
   тип карты, моё местоположение, поиск адреса и т.д. */
.map2-table-editor--picking { display: none !important; }
.map2-coord-picking .map2-top-actions {
  display: none !important;
}
/* Правая колонка плавно уезжает за правый край карты (transition — в map2.css). */
.map2-coord-picking .map2-btn-stack--right {
  transform: translate(calc(100% + 24px), -50%);
  opacity: 0;
  pointer-events: none;
}

/* Баннер-подсказка в режиме выбора координат. */
.map2-coord-picker-banner {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px 0 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  color: var(--color-on-surface);
  font-size: 14px;
  font-weight: 500;
}
.map2-coord-picker-banner .material-icons-round {
  color: var(--color-primary);
  font-size: 20px;
}
.map2-coord-picker-banner__cancel {
  margin-left: 8px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.map2-coord-picker-banner__cancel:hover {
  background: var(--color-hover);
  color: var(--color-on-surface);
}
.map2-coord-picker-banner__cancel .material-icons-round {
  color: inherit;
  font-size: 18px;
}

/* Тело таблицы — хост для Tabulator и busy-backdrop. padding-right даёт
   внешний отступ справа у самой таблицы; аппбар сверху отступ не получает
   (он физически вне body). */
.map2-table-editor__body {
  flex: 1;
  min-height: 0;
  position: relative;
  padding-right: 6px;
  box-sizing: border-box;
}
.map2-table-tabulator-host {
  width: 100%;
  height: 100%;
}

/* Busy-оверлей: затемнение всей области таблицы + плашка по центру верха. */
.map2-table-editor::before {
  content: '';
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  bottom: 0;
  background: color-mix(in srgb, #000 38%, transparent);
  z-index: 15;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.map2-table-editor.is-busy::before {
  opacity: 1;
}
.map2-table-editor.is-busy .map2-table-editor__appbar {
  pointer-events: none;
  opacity: 0.55;
}
.map2-table-editor.is-busy .map2-table-editor__body {
  pointer-events: none;
}
.map2-table-editor.is-busy { cursor: progress; }

.map2-table-editor__busy {
  display: none;
  position: absolute;
  top: 16px;
  left: 0;
  right: 0;
  height: 0;
  z-index: 20;
  pointer-events: none;
}
.map2-table-editor.is-busy .map2-table-editor__busy {
  display: block;
}
.map2-table-editor__busy-inner {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 4px 12px color-mix(in srgb, #000 15%, transparent);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-surface);
  pointer-events: auto;
}
.map2-table-editor__busy-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: map2-table-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes map2-table-spin {
  to { transform: rotate(360deg); }
}

/* ─────────── Tabulator theme overrides ─────────── */
/* Все правила с префиксом .map2-table-editor .tabulator ... чтобы
   (1) поднять специфичность выше tabulator_modern, (2) не влиять на другие
   потенциальные инстансы Tabulator. Там, где modern-тема прописывает
   фиксированные HEX-цвета прямо в элементе — используем !important, иначе
   каскад не перебивается. */

.map2-table-editor .tabulator,
.map2-table-editor .tabulator * {
  font-family: inherit;
}
/* Исключение для Material Icons: tabulator универсальным селектором сбивает
   font-family у всех потомков, но иконки обязаны использовать шрифт Material
   Icons, иначе «gps_fixed» рендерится как текст. */
.map2-table-editor .tabulator .material-icons { font-family: 'Material Icons' !important; }
.map2-table-editor .tabulator .material-icons-outlined { font-family: 'Material Icons Outlined' !important; }
.map2-table-editor .tabulator .material-icons-round { font-family: 'Material Icons Round' !important; }
.map2-table-editor .tabulator {
  background: var(--color-surface);
  border: 0;
  font-size: 12px !important;
  color: var(--color-on-surface);
}

/* Заголовок */
.map2-table-editor .tabulator .tabulator-header {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)) !important;
  border-top: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, var(--color-surface)) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 0 !important;
  color: var(--color-on-surface) !important;
  font-weight: 600;
}
/* Tabulator рендерит col/cell без текстовых пробелов (createElement+append),
   поэтому whitespace-gap между inline-block детьми не возникает — костыли
   с display:flex или font-size:0 не нужны (они ломают layout-расчёт ширин
   Tabulator'ом). Мы только перекрываем цвет фона table-подложки (в modern
   она #f3f3f3 — ярко выделяется в dark-теме между рядами). */
.map2-table-editor .tabulator .tabulator-tableholder,
.map2-table-editor .tabulator .tabulator-tableholder .tabulator-table {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
}

.map2-table-editor .tabulator .tabulator-col {
  background: transparent !important;
  border-right: 1px solid color-mix(in srgb, var(--color-border) 50%, var(--color-surface)) !important;
  border-left: 0 !important;
  color: var(--color-on-surface) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  /* vendor `.tabulator-col` — inline-flex column с justify-content:flex-start.
     Это прижимало col-content к верху колонки, даже когда col выше своего
     содержимого. justify-content: center вертикально центрирует col-content
     внутри col. */
  justify-content: center !important;
}
.map2-table-editor .tabulator .tabulator-header .tabulator-col:first-child,
.map2-table-editor .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {
  padding-left: 0 !important;
}
/* Col-content — flex-row, вертикально центрирует содержимое (title-holder).
   Правое внутреннее смещение убрано (padding-right: 0) — стрелка сортировки
   теперь в потоке (см. .tabulator-col-sorter), идёт сразу после текста.
   Вертикальный padding сохранён (8px), иначе header-ряд сжимается до
   line-height текста. */
.map2-table-editor .tabulator .tabulator-col .tabulator-col-content {
  padding: 8px 0 8px 10px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  width: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}
/* Title-holder — flex-row с title + sorter. title занимает столько места,
   сколько нужно для текста (flex: 0 1 auto), стрелка идёт сразу за текстом.
   Gap между ними не нужен — стрелка прижимается к правому краю текста,
   смещение от правого края колонки задаёт margin-right у sorter. */
.map2-table-editor .tabulator .tabulator-col .tabulator-col-title-holder {
  display: flex !important;
  align-items: center !important;
  gap: 0;
  width: 100%;
  min-width: 0;
}
.map2-table-editor .tabulator .tabulator-col .tabulator-col-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-on-surface) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  /* flex: 1 1 auto — title тянется до стрелки, стрелка прижимается к правому
     краю колонки. При коротком тексте — gap между текстом и стрелкой. При
     длинном — ellipsis в конце, стрелка по-прежнему справа. */
  flex: 1 1 auto !important;
  min-width: 0;
  padding-right: 0 !important;
}

/* Активная сортировка — подсветка заголовка как в кастомной таблице. */
.map2-table-editor .tabulator .tabulator-col[aria-sort="ascending"],
.map2-table-editor .tabulator .tabulator-col[aria-sort="descending"] {
  background: color-mix(in srgb, var(--color-primary) 35%, var(--color-surface)) !important;
  color: var(--color-on-surface) !important;
}
.map2-table-editor .tabulator .tabulator-col[aria-sort="ascending"] .tabulator-col-title,
.map2-table-editor .tabulator .tabulator-col[aria-sort="descending"] .tabulator-col-title {
  font-weight: 700;
}

/* Индикатор сортировки — inline-flex в потоке title-holder, сразу после
   текста. Не поверх, не абсолютно-позиционированный. Место под стрелку
   резервируется всегда (через natural width arrow'а) — поэтому opacity
   переключается без layout-шифта. */
.map2-table-editor .tabulator .tabulator-col .tabulator-col-sorter {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  margin-right: 5px !important;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.map2-table-editor .tabulator .tabulator-col:hover .tabulator-col-sorter,
.map2-table-editor .tabulator .tabulator-col[aria-sort="ascending"] .tabulator-col-sorter,
.map2-table-editor .tabulator .tabulator-col[aria-sort="descending"] .tabulator-col-sorter {
  opacity: 1;
}
/* iOS-style chevron вместо border-треугольников Tabulator'а. Рисуем через
   mask-image (inline SVG) — фон элемента красится в нужный цвет и работает
   как окрашенная иконка. */
.map2-table-editor .tabulator .tabulator-col .tabulator-arrow {
  border: 0 !important;
  width: 14px !important;
  height: 14px !important;
  background-color: color-mix(in srgb, var(--color-on-surface) 40%, transparent);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/></svg>") center / contain no-repeat;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.map2-table-editor .tabulator .tabulator-col[aria-sort="ascending"] .tabulator-arrow {
  background-color: var(--color-primary);
  transform: rotate(180deg);
}
.map2-table-editor .tabulator .tabulator-col[aria-sort="descending"] .tabulator-arrow {
  background-color: var(--color-primary);
}

/* Направленческие стрелки в заголовках колонок «Расстояние от таблички ...»
   (front/right/left). Рисуются через mask-image (SVG) в том же стиле, что и
   sort-arrow, позиционируются абсолютно у левого края col-content, всегда
   видны, цвет primary с opacity 0.5. Базовый padding-left у col-content —
   10px, увеличиваем до 26px, чтобы иконка (14px) поместилась без наложения
   на текст заголовка. */
.map2-table-editor .tabulator .tabulator-col.map2-tbl-col-front .tabulator-col-content,
.map2-table-editor .tabulator .tabulator-col.map2-tbl-col-right .tabulator-col-content,
.map2-table-editor .tabulator .tabulator-col.map2-tbl-col-left .tabulator-col-content {
  padding-left: 26px !important;
}
.map2-table-editor .tabulator .tabulator-col.map2-tbl-col-front .tabulator-col-content::before,
.map2-table-editor .tabulator .tabulator-col.map2-tbl-col-right .tabulator-col-content::before,
.map2-table-editor .tabulator .tabulator-col.map2-tbl-col-left .tabulator-col-content::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  background-color: var(--color-primary);
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.map2-table-editor .tabulator .tabulator-col.map2-tbl-col-front .tabulator-col-content::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z'/></svg>");
}
.map2-table-editor .tabulator .tabulator-col.map2-tbl-col-right .tabulator-col-content::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z'/></svg>");
}
.map2-table-editor .tabulator .tabulator-col.map2-tbl-col-left .tabulator-col-content::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z'/></svg>");
}

/* Грип ресайза колонки — тонкая primary-полоска при hover (как в кастомной). */
.map2-table-editor .tabulator .tabulator-col .tabulator-col-resize-handle {
  width: 8px;
  transition: background 0.12s;
}
.map2-table-editor .tabulator .tabulator-col .tabulator-col-resize-handle:hover {
  background: color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* Тело */
.map2-table-editor .tabulator .tabulator-tableholder {
  background: var(--color-surface);
}
.map2-table-editor .tabulator .tabulator-tableholder:focus {
  outline: 0;
}

/* Ряды — одинаковый фон для всех, без чередования. Выделение показывается
   только для .tabulator-selected (один ряд) или при редактировании ячейки
   (focus-within → primary-рамка). */
.map2-table-editor .tabulator .tabulator-row,
.map2-table-editor .tabulator .tabulator-row.tabulator-row-even,
.map2-table-editor .tabulator .tabulator-row.tabulator-row-odd {
  background: var(--color-surface) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, var(--color-surface)) !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  min-height: 28px;
  color: var(--color-on-surface);
}
/* Hover — очень лёгкая подсветка, чтобы пользователь видел «куда кликнет»,
   не забивая при этом selected/status-подложки. */
.map2-table-editor .tabulator .tabulator-row:hover,
.map2-table-editor .tabulator .tabulator-row.tabulator-row-even:hover,
.map2-table-editor .tabulator .tabulator-row.tabulator-row-odd:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)) !important;
  cursor: default;
}
/* Выделенный ряд — подсвечен заметно. Tabulator сам ставит класс
   .tabulator-selected при клике (selectableRows: 1). */
.map2-table-editor .tabulator .tabulator-row.tabulator-selected,
.map2-table-editor .tabulator .tabulator-row.tabulator-selected:hover {
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)) !important;
}
.map2-table-editor .tabulator .tabulator-row.tabulator-selected .tabulator-cell {
  /* Вертикальный разделитель между колонками в выделенном ряду — на обычной
     50%-подложке border-color он почти не читается под primary-16% фоном.
     Подставляем border в primary с той же непрозрачностью 60%, как у top/
     bottom shadow'ов выделения — границы становятся видимыми. */
  border-right-color: color-mix(in srgb, var(--color-primary) 60%, transparent) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-primary) 60%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 60%, transparent);
}

/* Фокус-рамка при редактировании ячейки — чтобы при клике на input в ряду,
   который ещё не selected, была визуальная обратная связь. */
.map2-table-editor .tabulator .tabulator-row:focus-within .tabulator-cell {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-primary) 55%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--color-primary) 55%, transparent);
}

/* Ячейки — дефолтная inline-block модель Tabulator сохраняется. Ширина
   задаётся инлайн самим Tabulator, мы только стилизуем визуал. */
.map2-table-editor .tabulator .tabulator-row .tabulator-cell {
  padding: 0 10px !important;
  border-right: 1px solid color-mix(in srgb, var(--color-border) 50%, var(--color-surface)) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
  font-size: 12px !important;
  line-height: 28px !important;
  min-height: 28px !important;
  height: 28px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-on-surface);
  background: transparent;
  vertical-align: middle;
  box-sizing: border-box !important;
}
/* Если в ряду хоть одна ячейка в режиме редактирования — строка становится
   flex-контейнером с `align-items: stretch`, чтобы все ячейки (в т.ч.
   не-editing) растянулись до высоты editing-ячейки. Иначе inline-block
   ячейки сохраняют свою высоту 28px, и вертикальные разделители (border-
   right) обрываются на 28px, оставляя пустое пространство под ними.
   `:has()` — современный селектор. */
.map2-table-editor .tabulator .tabulator-row:has(.tabulator-editing) {
  height: auto !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: stretch !important;
}
.map2-table-editor .tabulator .tabulator-row:has(.tabulator-editing) .tabulator-cell:not(.tabulator-editing) {
  height: auto !important;
  min-height: 28px !important;
  line-height: 1.4 !important;
  /* flex-item: ширина — из width, которую Tabulator проставил inline,
     высота — stretch от align-items. Border-right тянется по полной
     высоте строки. */
  flex: 0 0 auto;
}
.map2-table-editor .tabulator .tabulator-row .tabulator-cell:first-child {
  border-left: 0 !important;
}

/* Колонка "№" (порядковый номер) — без отдельной подложки, только центровка
   и приглушённый цвет цифр. Левые отступы (padding-left у заголовка и
   ячеек) обнулены — иначе цифра визуально смещена вправо от центра
   колонки. */
.map2-table-editor .tabulator .map2-tbl-col-index {
  text-align: center !important;
  color: var(--color-on-surface-secondary) !important;
  user-select: none;
}
.map2-table-editor .tabulator .tabulator-col.map2-tbl-col-index .tabulator-col-content {
  padding-left: 0 !important;
}
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-col-index {
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Номера строк приглушены — это вспомогательный индикатор, не контент. В
     выделенных строках opacity возвращается к 1, чтобы не конкурировать с
     яркой primary-подложкой выделения. */
  opacity: 0.6;
}
.map2-table-editor .tabulator .tabulator-row.tabulator-selected .tabulator-cell.map2-tbl-col-index {
  opacity: 1;
}

/* Dirty cell — правка пользователя. Перебивает hover и status-подложку. */
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-dirty {
  background: color-mix(in srgb, var(--color-primary) 30%, transparent) !important;
  font-weight: 500;
}

/* Цветной текст колонки «Техническое состояние» (фон ячейки оставляем
   обычным — выглядит как остальные ячейки). Класс .map2-tbl-status-*
   ставится formatter'ом в table-tabulator.js. */
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-status-ok {
  color: #2E7D32;
  font-weight: 500;
}
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-status-bad {
  color: #C62828;
  font-weight: 500;
}
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-status-warn {
  color: #E65100;
  font-weight: 500;
}

/* Цветной текст колонки «Дата последней проверки» — пороги «свежести»
   совпадают с индикатором возраста проверки на иконках маркеров
   (см. hydrants.js: MAP2_HYDRANT_CHECK_AGING_MS / OUTDATED_MS). */
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-date-fresh {
  color: #2E7D32;
  font-weight: 500;
}
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-date-aging {
  color: #E65100;
  font-weight: 500;
}
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-date-outdated {
  color: #C62828;
  font-weight: 500;
}

/* Hover-иконка редактирования (карандаш/календарь/стрелка dropdown'а) и
   иконка-глаз на image-ячейке. Это реальные DOM-элементы (не ::after), чтобы
   у них был собственный :hover со сменой фона и цвета — аналогично кнопке-
   мишени в ячейке координат. */
.map2-tbl-cell-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.map2-tbl-cell-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Контейнер hover-иконки. Сам по себе не содержит глиф — внутри вложенный
   .material-icons-round с glyph-текстом. flex-центрирование ребёнка даёт
   точный визуальный центр (в отличие от варианта, когда глиф и контейнер —
   один элемент: тогда line-box anonymous flex item уходит выше/ниже центра
   и иконка визуально «уезжает»). */
.map2-tbl-cell-icon,
.map2-tbl-cell-eye {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  color: var(--color-on-surface-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  visibility: hidden;
  transition: background 0.15s, color 0.15s;
}
.map2-tbl-cell-icon .material-icons-round,
.map2-tbl-cell-eye .material-icons-round {
  font-size: 14px;
  line-height: 1;
  /* «block» — убирает подстройку по baseline родителя, и сам text остаётся
     центрированным flex'ом. */
  display: block;
}
.map2-tbl-cell-eye .material-icons-round {
  font-size: 16px;
}
.map2-tbl-cell-icon.map2-tbl-cell-icon--dropdown .material-icons-round {
  font-size: 20px;
}
/* Показываем иконки при hover на ячейке. */
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-cell-icon-edit:hover .map2-tbl-cell-icon,
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-cell-icon-date:hover .map2-tbl-cell-icon,
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-cell-icon-dropdown:hover .map2-tbl-cell-icon,
.map2-table-editor .tabulator .tabulator-cell.map2-tbl-col-image:hover .map2-tbl-cell-eye {
  visibility: visible;
}
/* Собственный hover — подложка primary 14% + цвет primary, как у pick-кнопки. */
.map2-tbl-cell-icon:hover,
.map2-tbl-cell-eye:hover {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--color-primary);
}
/* В режиме редактирования ячейки иконки не показываем — место нужно полю
   ввода. */
.map2-table-editor .tabulator .tabulator-cell.tabulator-editing .map2-tbl-cell-icon,
.map2-table-editor .tabulator .tabulator-cell.tabulator-editing .map2-tbl-cell-eye {
  display: none;
}

/* Режим редактирования ячейки — primary-рамка + светлая primary-подложка.
   Высоту не фиксируем: для text/image editor'ов textarea растёт по
   scrollHeight (см. _map2TableTextEditor), ряд тянется через
   row.normalizeHeight. min-height: 28px сохраняет базовую высоту. */
.map2-table-editor .tabulator .tabulator-cell.tabulator-editing {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)) !important;
  box-shadow: inset 0 0 0 2px var(--color-primary);
  padding: 0 !important;
  border-right-color: transparent;
  height: auto !important;
  min-height: 28px !important;
  overflow: visible !important;
  line-height: normal !important;
}
.map2-table-editor .tabulator .tabulator-cell.tabulator-editing input,
.map2-table-editor .tabulator .tabulator-cell.tabulator-editing select {
  background: transparent;
  color: var(--color-on-surface);
  font: inherit;
  font-size: 12px !important;
  border: 0;
  outline: 0;
  width: 100%;
  height: 28px;
  padding: 0 10px;
  box-sizing: border-box;
  line-height: 28px !important;
}
.map2-table-editor .tabulator .tabulator-cell.tabulator-editing textarea {
  background: transparent;
  color: var(--color-on-surface);
  font: inherit;
  font-size: 12px !important;
  /* line-height: 22px + padding 3+3 = 28 — точно высота обычной строки
     таблицы, для 1-line текста ряд не увеличивается. */
  line-height: 22px !important;
  border: 0;
  outline: 0;
  width: 100%;
  padding: 3px 10px !important;
  box-sizing: border-box;
  resize: none;
  min-height: 28px !important;
  white-space: pre-wrap;
}

/* Validation error — красный обвод. */
.map2-table-editor .tabulator .tabulator-cell.tabulator-validation-fail {
  box-shadow: inset 0 0 0 2px #F44336 !important;
  background: color-mix(in srgb, #F44336 8%, var(--color-surface)) !important;
}

/* Editor list (для breakdown / status) — Material 3 стилизация. */
.tabulator-edit-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 16px color-mix(in srgb, #000 15%, transparent);
  color: var(--color-on-surface);
  font-size: 12px;
  max-height: 320px;
}
.tabulator-edit-list .tabulator-edit-list-item {
  padding: 6px 10px;
  color: var(--color-on-surface);
}
.tabulator-edit-list .tabulator-edit-list-item.active,
.tabulator-edit-list .tabulator-edit-list-item:hover {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-on-surface);
}
.tabulator-edit-list .tabulator-edit-list-placeholder {
  padding: 8px 12px;
  color: var(--color-on-surface-secondary);
  font-style: italic;
}

/* Placeholder для пустой таблицы */
.map2-table-editor .tabulator-placeholder {
  color: var(--color-on-surface-secondary);
  font-style: italic;
}

/* Скроллбары — всегда видимые (non-overlay).

   macOS auto-hide скроллбары включаются двумя факторами:
   (а) системной настройкой «Показывать полосы прокрутки: Автоматически»,
   (б) свойством `-webkit-overflow-scrolling: touch`, которое vendor CSS
       Tabulator'а ставит на `.tabulator-tableholder` по умолчанию — оно
       активирует momentum-скроллинг WebKit, а вместе с ним и overlay-
       рендер скроллбара, полностью игнорируя любые CSS-стили.
   Принудительно выключаем momentum и заставляем overflow: scroll, чтобы
   дорожка была зарезервирована всегда, даже если контент влезает целиком. */
.map2-table-editor .tabulator-tableholder {
  overflow: scroll !important;
  -webkit-overflow-scrolling: auto !important;
  scrollbar-width: auto;
  scrollbar-color: color-mix(in srgb, var(--color-on-surface) 55%, transparent)
                   color-mix(in srgb, var(--color-on-surface) 8%, transparent);
  scrollbar-gutter: stable;
  /* Запас под глобальный рекламный баннер внизу — иначе последние ряды
     уходят под баннер и их нельзя доскроллить. Виртуальный скроллер
     Tabulator'а игнорирует padding на `.tabulator-table`, поэтому запас
     делаем через ::after-фантом внутри самого holder'а (он живёт в scroll-
     потоке рядом с tabulator-table, гарантированно увеличивая scrollHeight).
     Отступ = 1.5 × высоты баннера — чтобы последний ряд заметно отрывался
     от верхнего края баннера, а не прилипал к нему. */
  scroll-padding-bottom: calc(var(--global-ad-safe-bottom) * 1.5);
  position: relative;
}
.map2-table-editor .tabulator .tabulator-tableholder::after {
  content: '';
  display: block;
  height: calc(var(--global-ad-safe-bottom) * 1.5);
  width: 1px;
  flex-shrink: 0;
  pointer-events: none;
}
.map2-table-editor .tabulator-tableholder::-webkit-scrollbar {
  width: 12px;
  height: 12px;
  display: block;
  -webkit-appearance: none;
  background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}
.map2-table-editor .tabulator-tableholder::-webkit-scrollbar:horizontal {
  height: 12px;
}
.map2-table-editor .tabulator-tableholder::-webkit-scrollbar:vertical {
  width: 12px;
}
.map2-table-editor .tabulator-tableholder::-webkit-scrollbar-thumb,
.map2-table-editor .tabulator-tableholder::-webkit-scrollbar-thumb:window-inactive {
  background: color-mix(in srgb, var(--color-on-surface) 55%, transparent);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 32px;
  min-width: 32px;
}
.map2-table-editor .tabulator-tableholder::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--color-on-surface) 75%, transparent);
  background-clip: padding-box;
  border: 2px solid transparent;
}
.map2-table-editor .tabulator-tableholder::-webkit-scrollbar-track,
.map2-table-editor .tabulator-tableholder::-webkit-scrollbar-track:window-inactive {
  background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}
.map2-table-editor .tabulator-tableholder::-webkit-scrollbar-corner {
  background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
}

/* Row ПДР — легкая стилизация курсивом, без особого фона (все ряды одного
   цвета по требованию UX). */
.map2-table-editor .tabulator-row.map2-tbl-row-podr .tabulator-cell {
  font-style: italic;
  color: color-mix(in srgb, var(--color-on-surface) 75%, var(--color-surface));
}

/* Трёхкнопочный confirm при закрытии с правками */
.map2-table-close-confirm__footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px 16px;
  flex-wrap: wrap;
}

/* ─────────── Тёмная тема ─────────── */

[data-theme="dark"] .map2-table-editor .tabulator {
  background: var(--color-surface);
  color: var(--color-on-surface);
}
/* В тёмной теме status-цвета берём светлее, иначе на тёмном фоне тёмные
   зелёный/красный не читаются. */
[data-theme="dark"] .map2-table-editor .tabulator .tabulator-cell.map2-tbl-status-ok {
  color: #81C784;
}
[data-theme="dark"] .map2-table-editor .tabulator .tabulator-cell.map2-tbl-status-bad {
  color: #E57373;
}
[data-theme="dark"] .map2-table-editor .tabulator .tabulator-cell.map2-tbl-status-warn {
  color: #FFB74D;
}
[data-theme="dark"] .map2-table-editor .tabulator .tabulator-cell.map2-tbl-date-fresh {
  color: #81C784;
}
[data-theme="dark"] .map2-table-editor .tabulator .tabulator-cell.map2-tbl-date-aging {
  color: #FFB74D;
}
[data-theme="dark"] .map2-table-editor .tabulator .tabulator-cell.map2-tbl-date-outdated {
  color: #E57373;
}
[data-theme="dark"] .map2-table-editor .tabulator .tabulator-col[aria-sort="ascending"] .tabulator-arrow,
[data-theme="dark"] .map2-table-editor .tabulator .tabulator-col[aria-sort="descending"] .tabulator-arrow {
  /* стрелки и так берут var(--color-on-surface) — в dark это светлый цвет */
}
[data-theme="dark"] .map2-table-editor .tabulator .tabulator-cell.tabulator-editing input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}
[data-theme="dark"] .tabulator-edit-list {
  background: var(--color-surface);
  color: var(--color-on-surface);
}

/* css/tools/legal.css */
/* === Правовые документы === */

.main-content:has(.legal-page) { padding-top: 0; }

.legal-page {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.legal-page__toolbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 4px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.legal-page__back {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-on-surface-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}

.legal-page__back:hover {
  background: var(--color-hover);
  color: var(--color-primary);
}

.legal-page__back:active {
  transform: scale(0.96);
}

.legal-page__title {
  margin: 0;
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.legal-page__version {
  font-size: 12px;
  color: var(--color-on-surface-variant, #6b7280);
  white-space: nowrap;
}

.legal-page__content {
  max-width: 820px;
  margin: 0 auto;
  padding: 24px 8px 64px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-on-surface);
}

.legal-page__content h2 {
  margin: 32px 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.legal-page__content h2:first-child {
  margin-top: 0;
}

.legal-page__content h3 {
  margin: 20px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.legal-page__content p {
  margin: 0 0 12px;
}

.legal-page__content ul {
  margin: 0 0 12px;
  padding-left: 24px;
}

.legal-page__content li {
  margin: 4px 0;
}

.legal-page__content a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page__content a:hover {
  text-decoration: none;
}

.legal-page__content strong {
  font-weight: 600;
}

.legal-page__content .legal-meta {
  margin-bottom: 24px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-left: 3px solid var(--color-primary);
  border-radius: 4px;
  font-size: 13px;
  color: var(--color-on-surface-variant, #6b7280);
}

.legal-page__loading,
.legal-page__error,
.legal-page__notfound {
  padding: 32px 16px;
  text-align: center;
  color: var(--color-on-surface-variant, #6b7280);
}

.legal-page__error {
  color: #d32f2f;
}

/* === Чекбокс согласия (логин, поддержка) === */
.legal-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-on-surface);
  cursor: pointer;
}

.legal-consent input[type="checkbox"] {
  margin-top: 1px;
}

.legal-consent span {
  flex: 1;
  min-width: 0;
}

.legal-consent a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-consent a:hover {
  text-decoration: none;
}

/* css/tools/payment.css */
/* === Payment Modal (YooKassa) === */
/* Использует базовый .tool-modal-overlay / .tool-modal и добавляет
   градиенты + карточки тарифов/методов в стиле Flutter lib/screens/yookassa.dart. */

#payment-modal-overlay .tool-modal {
  max-width: 480px;
  width: 100%;
  overflow: hidden;
}

.payment-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px 10px 20px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--color-primary) 20%, var(--color-surface));
  transition: background 0.3s ease;
}
.payment-modal--methods .payment-modal__header {
  background: color-mix(in srgb, #4CAF50 22%, var(--color-surface));
}

.payment-modal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.payment-modal__body {
  padding: 14px 16px 8px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 55vh;
}

/* === Тарифы === */
.payment-tariffs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-tariff {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-on-surface);
  cursor: pointer;
  font-family: var(--font-family);
  text-align: left;
  transition: background 0.15s, border-color 0.15s, padding 0.2s;
}
.payment-tariff:hover {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.payment-tariff--selected {
  border-color: #FFC107;
  background: color-mix(in srgb, #FFC107 18%, transparent);
  padding: 12px 14px 14px;
}

.payment-tariff__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.payment-tariff__label {
  font-size: 16px;
  font-weight: 700;
  color: #2E7D32;
}
.payment-tariff--selected .payment-tariff__label {
  color: #B28700;
}
[data-theme="dark"] .payment-tariff__label { color: #81C784; }
[data-theme="dark"] .payment-tariff--selected .payment-tariff__label { color: #FFD54F; }

.payment-tariff__price {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-on-surface);
  white-space: nowrap;
}
.payment-tariff--selected .payment-tariff__price { color: #B28700; }
[data-theme="dark"] .payment-tariff--selected .payment-tariff__price { color: #FFD54F; }

.payment-tariff__discount {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface-secondary);
  margin-left: 2px;
}
.payment-tariff--selected .payment-tariff__discount {
  color: inherit;
}

.payment-tariff__eco {
  font-size: 13px;
  color: var(--color-on-surface-secondary);
}
.payment-tariff--selected .payment-tariff__eco {
  color: #2E7D32;
  font-weight: 600;
}
[data-theme="dark"] .payment-tariff--selected .payment-tariff__eco { color: #81C784; }

.payment-tariff__desc {
  font-size: 13px;
  color: var(--color-on-surface);
  text-align: center;
  padding: 6px 4px 0;
  line-height: 1.4;
}

/* === Методы оплаты === */
.payment-methods {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payment-method {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  cursor: pointer;
  font-family: var(--font-family);
  transition: background 0.15s, border-color 0.15s, padding 0.15s;
}
.payment-method:hover {
  background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.payment-method--selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 22%, transparent);
  padding: 12px 14px;
}

.payment-method__img {
  height: 30px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.payment-method--selected .payment-method__img {
  height: 36px;
}

.payment-method__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.payment-method--selected .payment-method__title {
  font-size: 17px;
}

/* === Footer === */
.payment-modal__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
}

.payment-modal__help {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-on-surface-secondary);
}
.payment-modal__help a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.payment-offer {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-on-surface-secondary);
  cursor: pointer;
  user-select: none;
}
.payment-offer input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--color-primary);
}
.payment-offer a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.payment-modal__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.payment-modal__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: background 0.15s;
}
.payment-modal__back:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.payment-modal__back:disabled { opacity: 0.5; cursor: default; }

.payment-modal__next {
  min-width: 140px;
  height: 38px;
  padding: 0 20px;
  margin-left: auto;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family);
  letter-spacing: 0.2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: filter 0.15s, opacity 0.15s, box-shadow 0.15s, transform 0.1s;
}
[data-theme="dark"] .payment-modal__next { color: #000; }
.payment-modal__next:hover:not(:disabled) {
  filter: brightness(1.05);
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.payment-modal__next:active:not(:disabled) { transform: translateY(1px); }
.payment-modal__next:disabled { opacity: 0.5; cursor: default; box-shadow: none; }
.payment-modal__next--pay {
  background: #2E7D32;
  color: #fff;
}
[data-theme="dark"] .payment-modal__next--pay { color: #fff; }

.payment-modal__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: payment-spin 0.8s linear infinite;
}
@keyframes payment-spin { to { transform: rotate(360deg); } }

.payment-modal__error {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: #D32F2F;
  background: color-mix(in srgb, #D32F2F 10%, transparent);
}
[data-theme="dark"] .payment-modal__error { color: #F28B82; }

/* === Блок подписки в профиле === */
.profile-modal__paid-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, #4CAF50 10%, transparent);
  border: 1px solid color-mix(in srgb, #4CAF50 28%, transparent);
}
.profile-modal__paid-info--forever {
  background: color-mix(in srgb, #FFC107 14%, transparent);
  border-color: color-mix(in srgb, #FFC107 36%, transparent);
}

.profile-modal__paid-title {
  font-size: 13px;
  font-weight: 600;
  color: #2E7D32;
}
[data-theme="dark"] .profile-modal__paid-title { color: #81C784; }
.profile-modal__paid-info--forever .profile-modal__paid-title { color: #B28700; }
[data-theme="dark"] .profile-modal__paid-info--forever .profile-modal__paid-title { color: #FFD54F; }

.profile-modal__paid-date {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-on-surface);
}

.profile-modal__paid-extend {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px dashed color-mix(in srgb, #4CAF50 35%, transparent);
}
.profile-modal__paid-extend .profile-modal__pay-hint {
  text-align: center;
  opacity: 0.65;
}

/* Pill-кнопка оплаты: прозрачный фон, обводка onSurface, жёлтый кружок с ₽.
   Hover — зелёный полупрозрачный фон, зелёная обводка и текст. */
.profile-modal__pay-btn--pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 6px;
  border: 1.5px solid var(--color-on-surface);
  border-radius: 999px;
  background: transparent;
  color: var(--color-on-surface);
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-family);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.profile-modal__pay-btn--pill:hover {
  background: color-mix(in srgb, #4CAF50 30%, transparent);
  border-color: #2E7D32;
  color: #2E7D32;
}
[data-theme="dark"] .profile-modal__pay-btn--pill:hover {
  border-color: #81C784;
  color: #81C784;
}
.profile-modal__pay-btn--pill:active {
  transform: translateY(1px);
}
.profile-modal__pay-ruble {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-modal__pay-ruble svg {
  display: block;
}

/* Переопределяем старый .profile-modal__pay — теперь это только wrapper
   для кнопки "Оформить" с подсказкой снизу. */
.profile-modal__pay {
  align-items: center;
  text-align: center;
}
.profile-modal__pay .profile-modal__pay-hint {
  text-align: center;
}

/* css/pages/obyaz.css */
/* === Страница «Обязанности» === */
.obyaz-page {
  display: flex;
  flex-direction: column;
}
.obyaz-page__toolbar {
  height: 48px;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-on-surface);
  z-index: 5;
  margin: 0 -16px;
}
.obyaz-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 16px auto 32px;
  width: 100%;
  container-type: inline-size;
  container-name: obyaz;
}
.obyaz-list__intro {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.obyaz-list__columns {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}
.obyaz-list__column {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.obyaz-ad-slot--top {
  display: block;
  margin: 8px 0 12px;
}
.obyaz-list__column .obyaz-ad-slot--intro {
  display: none;
}
@container obyaz (min-width: 1200px) {
  .obyaz-list__intro,
  .obyaz-list__columns {
    max-width: none;
  }
  .obyaz-list__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }
}
.obyaz-list .upr-item {
  border-bottom: none;
}
.obyaz-list .upr-item > .tool-accordion__header {
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  transition: background 0.15s, border-color 0.15s;
}
.obyaz-list .upr-item > .tool-accordion__header:hover {
  background: var(--color-hover);
  transform: none;
}
.obyaz-list .upr-item > .tool-accordion__header .tool-accordion__title {
  flex: 1;
  min-width: 0;
  flex-shrink: 1;
  font-size: 15px;
  font-weight: 600;
  white-space: normal;
  text-align: left;
}
.obyaz-list .upr-item > .tool-accordion__body {
  margin: 4px 0 0;
  padding: 0 16px;
  background: transparent;
}
.obyaz-list .upr-item.tool-accordion--open > .tool-accordion__header {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-color: var(--color-primary);
}
.obyaz-list .upr-item.tool-accordion--open > .tool-accordion__body {
  padding: 14px 18px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-top: 4px;
}
.obyaz-list .upr-item--wide > .tool-accordion__body {
  padding: 0;
  margin: 0;
}
.obyaz-list .upr-item--wide.tool-accordion--open > .tool-accordion__body {
  padding: 0;
  margin-top: 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.upr-item--wide .tool-accordion__body-inner {
  padding: 0;
}
.upr-item--wide .obyaz-table-wrap {
  border-radius: 0;
  overflow-x: visible;
}
.upr-item--wide .obyaz-table {
  min-width: 0;
}
.upr-item--wide .obyaz-table__note,
.upr-item--wide .obyaz-ad-slot--inside {
  display: none;
}
.obyaz-intro {
  margin: 12px 0 4px;
  padding: 14px 18px;
  background: var(--color-surface);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-on-surface-secondary);
  white-space: pre-wrap;
}
.obyaz-text {
  white-space: pre-wrap;
  font: inherit;
  font-family: var(--font-family);
  color: var(--color-on-surface);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Табель боевого расчёта — настоящая таблица */
.obyaz-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
}
.obyaz-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface);
}
.obyaz-table th,
.obyaz-table td {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  vertical-align: top;
  text-align: left;
}
.obyaz-table thead th {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  font-weight: 600;
  text-align: center;
  white-space: pre-line;
}
.obyaz-table tbody th {
  width: 140px;
  background: color-mix(in srgb, var(--color-on-surface) 4%, transparent);
  font-weight: 600;
  text-align: center;
}
.obyaz-table__corner {
  width: 140px;
}
.obyaz-table__note {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  font-style: italic;
}
.main-content:has(.obyaz-page) { padding-top: 0; }

/* css/pages/new-docs.css */
/* === Страница «Новые документы» === */
.newdocs-page {
  display: flex;
  flex-direction: column;
}
.newdocs-page__toolbar {
  height: 48px;
  position: sticky;
  top: 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  z-index: 5;
  margin: 0 -16px;
}
.newdocs-page__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-on-surface);
}
.newdocs-search {
  flex: 1;
  max-width: 360px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-family);
  outline: none;
  background: var(--color-surface);
  color: var(--color-on-surface);
  transition: border-color 0.2s;
}
.newdocs-search:focus {
  border-color: var(--color-primary);
}
.main-content:has(.newdocs-page) { padding-top: 0; }

/* css/pages/doc-viewer.css */
/* === Страница просмотра PDF документа === */
.doc-viewer-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.doc-viewer-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--color-bg);
  display: block;
}
.main-content:has(.doc-viewer-page) {
  padding: 0 6px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.newdocs-list {
  list-style: none;
  padding: 12px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.newdocs-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.newdocs-item:hover {
  border-color: var(--color-primary);
}
.newdocs-item__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--color-on-surface-secondary);
  margin-bottom: 6px;
}
.newdocs-item__source {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.newdocs-item__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.4;
}
.newdocs-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease, margin-top 0.3s ease;
  overflow: hidden;
  margin-top: 0;
}
.newdocs-item__body-inner {
  min-height: 0;
  overflow: hidden;
}
.newdocs-item--open .newdocs-item__body {
  grid-template-rows: 1fr;
  margin-top: 10px;
}
.newdocs-item__description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-on-surface-secondary);
  margin-bottom: 10px;
  white-space: pre-wrap;
}
.newdocs-item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.newdocs-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-on-surface-secondary);
  font-size: 14px;
}
.newdocs-state__btn {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 20px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
[data-theme="dark"] .newdocs-state__btn {
  color: #000;
}

/* vendor/quill/quill.snow.css */
/*!
 * Quill Editor v2.0.3
 * https://quilljs.com
 * Copyright (c) 2017-2024, Slab
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}