/* ═══════════════════════════════════════════════════════════════════════════
   Фаворит Эксперт — главные стили
   Все цвета через CSS variables для лёгкой смены темы
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── CSS Variables ──────────────────────────────────────────────────────── */
:root {
  --primary: #00A8FF;
  --primary-dark: #1097DD;
  --primary-light: #29A3FF;
  --bg: #F5F7FA;
  --bg-card: #FFFFFF;
  --text-primary: #1A1A2E;
  --text-secondary: #6B7280;
  --text-on-primary: #FFFFFF;
  --border: #E5E7EB;
  --success: #10B981;
  --warning: #F59E0B;
  --danger: #EF4444;
  --ink: #0F172A;
  --accent: #0F766E;
  --soft-blue: #EFF6FF;
  --soft-green: #ECFDF5;
  --soft-orange: #FFF7ED;
  --system-bar-bg: var(--bg);

  /* Размеры layout */
  --header-height: 56px;
  --navbar-height: 64px;
  --content-max-width: 480px;
  --surface-gap: 6px;
  --surface-radius: 8px;
  --surface-padding-y: 12px;
  --surface-padding-x: 16px;
  --surface-shadow: var(--shadow-md);

  /* Отступы */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;

  /* Скругление */
  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-full: 9999px;

  /* Тени */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-header: 0 1px 0 var(--border);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --primary: #2DA8FF;
  --primary-dark: #1D95DF;
  --primary-light: #63BFFF;
  --bg: #0D1117;
  --bg-card: #161B22;
  --text-primary: #F4F7FB;
  --text-secondary: #9AA6B2;
  --text-on-primary: #FFFFFF;
  --border: #2A3441;
  --success: #34D399;
  --warning: #FBBF24;
  --danger: #F87171;
  --ink: #F4F7FB;
  --accent: #2DA8FF;
  --soft-blue: #102838;
  --soft-green: #10261E;
  --soft-orange: #2A1C11;
  --dark-surface-raised: #1F2630;
  --dark-surface-muted: #252D38;
  --dark-border-strong: #3A4655;
  --system-bar-bg: var(--bg);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.34);
  --shadow-header: 0 1px 0 var(--border);
}

html.ui-density-compact {
  --spacing-md: 12px;
  --spacing-lg: 18px;
  --surface-gap: 4px;
  --surface-padding-y: 10px;
  --surface-padding-x: 12px;
}

/* ─── Reset & Base ───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  background: var(--system-bar-bg);
  /* Поддержка safe area (выемка iPhone) */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
}

body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--system-bar-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* скролл только внутри main-content */
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
  outline: none;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid rgba(0, 168, 255, 0.45);
  outline-offset: 3px;
}

/* ─── Утилиты ────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Экран загрузки ─────────────────────────────────────────────────────── */
.loader-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-lg);
  background: var(--bg);
  z-index: 9999;
}

.loader-logo {
  display: block;
  width: clamp(220px, 72vw, 300px);
  height: clamp(220px, 72vw, 300px);
  margin-bottom: clamp(-72px, -18vw, -48px);
  object-fit: contain;
}

.loader-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ─── Экран авторизации ──────────────────────────────────────────────────── */
.screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
}

.desktop-only-screen {
  z-index: 9300;
  padding: 32px;
  text-align: center;
}

.desktop-only-panel {
  width: 100%;
  max-width: 520px;
}

.desktop-only-logo {
  display: block;
  width: min(300px, 70vw);
  height: min(300px, 70vw);
  margin: 0 auto -54px;
  object-fit: contain;
}

.desktop-only-panel h1 {
  margin: 0 0 12px;
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
}

.desktop-only-panel p {
  max-width: 440px;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.5;
}

.auth-container {
  width: 100%;
  max-width: 400px;
}

.auth-logo {
  text-align: center;
  margin-bottom: 36px;
}

.auth-logo-img {
  display: block;
  width: clamp(220px, 72vw, 300px);
  height: clamp(220px, 72vw, 300px);
  margin: 0 auto clamp(-72px, -18vw, -48px);
  object-fit: contain;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.input-password-wrap {
  position: relative;
}

/* Скрываем встроенный глазик браузера (Edge, Chrome) */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-contacts-auto-fill-button,
input[type="password"]::-webkit-credentials-auto-fill-button {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.input-password-wrap .form-input {
  width: 100%;
  padding-right: 44px; /* место под глазик */
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
}

/* ─── Форма (общее) ──────────────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-input {
  padding: 12px var(--spacing-md);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-card);
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus {
  border-color: var(--primary);
}

.form-input:disabled,
.form-input.readonly {
  background: var(--bg);
  color: var(--text-secondary);
  cursor: not-allowed;
}

.form-error {
  padding: 10px var(--spacing-md);
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: 13px;
}

.form-error .support-email-link {
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

/* ─── Кнопки ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 12px var(--spacing-md);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  text-decoration: none;
  position: relative;
  isolation: isolate;
}

.btn:active { opacity: 0.85; }
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn::before,
.btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}

.btn:disabled:not(.is-loading):not([aria-busy="true"])::before,
.btn.is-loading::before,
.btn[aria-busy="true"]::before {
  width: clamp(28px, 8vmin, 32px);
  height: clamp(28px, 8vmin, 32px);
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.82);
  box-shadow: 0 1px 5px rgba(255, 255, 255, 0.4);
  opacity: 1;
  transform: translate(-50%, -50%);
}

.btn:disabled:not(.is-loading):not([aria-busy="true"])::after {
  width: clamp(13px, 3.8vmin, 15px);
  height: clamp(15px, 4.4vmin, 17px);
  background: #FFFFFF;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9h-2Zm-8-2a3 3 0 0 1 6 0v2H9V7Zm8 12H7v-8h10v8Zm-6-6h2v4h-2v-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17 9V7a5 5 0 0 0-10 0v2H5v12h14V9h-2Zm-8-2a3 3 0 0 1 6 0v2H9V7Zm8 12H7v-8h10v8Zm-6-6h2v4h-2v-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 1;
  transform: translate(-50%, -50%);
}

.btn.is-loading,
.btn[aria-busy="true"] {
  cursor: wait;
  pointer-events: none;
}

.btn.is-loading::after,
.btn[aria-busy="true"]::after {
  width: clamp(15px, 4.4vmin, 18px);
  height: clamp(15px, 4.4vmin, 18px);
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  background: transparent;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  transform: translate(-50%, -50%);
  animation: btn-state-spin 0.75s linear infinite;
}

@keyframes btn-state-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-loading::after,
  .btn[aria-busy="true"]::after {
    animation-duration: 1.5s;
  }
}

.btn-primary {
  background: var(--primary);
  color: var(--text-on-primary);
}

.btn-danger-text {
  background: transparent;
  color: var(--danger);
  padding-left: 0; padding-right: 0;
}

.btn-full { width: 100%; }

/* ─── Layout приложения ──────────────────────────────────────────────────── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-x pan-y;
}

#app input,
#app textarea,
#app select,
#app .generated-password code {
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

/* ─── Верхний хедер ──────────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--spacing-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-header);
  flex-shrink: 0;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-on-primary);
  font-family: inherit;
  transition: opacity 0.15s;
}
.header-avatar:active { opacity: 0.8; }

/* ─── Контент (скроллируемая область) ───────────────────────────────────── */
.main-content {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-md);
}
.main-content::-webkit-scrollbar { display: none; }

.offline-banner {
  flex-shrink: 0;
  width: min(calc(100% - 24px), var(--content-max-width));
  margin: var(--spacing-sm) auto 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 8px 12px;
  background: #FFFBEB;
  color: #92400E;
  border: 1px solid #FDE68A;
  border-radius: var(--surface-radius);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: var(--shadow-sm);
}

.offline-banner-mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--warning);
  color: var(--text-on-primary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

body.is-offline .main-content {
  padding-top: var(--spacing-sm);
}

body.is-camera-open {
  background: #000000;
}

body.is-camera-open #app,
body.is-camera-open .main-content {
  overflow: hidden;
}

body.is-camera-open .navbar {
  display: none;
}

/* ─── Нижний навбар ──────────────────────────────────────────────────────── */
.navbar {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  height: calc(var(--navbar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.navbar-item {
  flex: 0 1 calc(var(--content-max-width) / 3);
  max-width: calc(var(--content-max-width) / 3);
  height: var(--navbar-height);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px 0 8px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.navbar-item:focus-visible {
  outline-offset: -4px;
  border-radius: var(--radius-sm);
}

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

.navbar-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Страница задач ─────────────────────────────────────────────────────── */

.tasks-page {
  min-height: 100%;
  background: var(--bg);
}

.task-filter-shell,
.task-list,
.case-hero,
#task-map,
.detail-section,
.detail-disclosure,
.experts-page,
.settings-page,
.calendar-page,
.wip-page {
  width: 100%;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

.task-filter-shell {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: var(--spacing-sm) var(--spacing-md) 4px;
  background: var(--bg);
}

.task-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 3px clamp(4px, 1.5vw, 10px);
  padding: 4px 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}

.task-filter-button {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
}

.task-filter-button.is-active {
  background: var(--soft-blue);
  color: var(--primary-dark);
}

.task-filter-label {
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.task-filter-count {
  position: relative;
  top: 1px;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  color: #94A3B8;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.task-filters.has-large-counts,
.task-filters.has-extra-large-counts {
  column-gap: clamp(2px, 1vw, 6px);
  padding-inline: 4px;
}

.task-filters.has-large-counts .task-filter-button,
.task-filters.has-extra-large-counts .task-filter-button {
  gap: 2px;
  padding-inline: 2px;
}

.task-filters.has-large-counts .task-filter-label,
.task-filters.has-extra-large-counts .task-filter-label {
  font-size: clamp(9px, 2.8vw, 10px);
  letter-spacing: -0.1px;
}

.task-filters.has-large-counts .task-filter-count,
.task-filters.has-extra-large-counts .task-filter-count {
  font-size: 9px;
  letter-spacing: -0.2px;
}

.task-filters.has-extra-large-counts .task-filter-label,
.task-filters.has-extra-large-counts .task-filter-count {
  font-size: 8px;
}

.task-filter-button.is-active .task-filter-count {
  color: currentColor;
}

/* Список карточек */
.task-list {
  display: flex;
  flex-direction: column;
  gap: var(--surface-gap);
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

/* Карточка задачи */
.task-card {
  background: var(--bg-card);
  border-radius: var(--surface-radius);
  padding: var(--surface-padding-y) var(--surface-padding-x);
  box-shadow: var(--surface-shadow);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.task-card.is-overdue {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  box-shadow: 0 3px 12px rgba(185, 28, 28, 0.14);
}

.task-card.is-telegram-inspection:not(.is-overdue) {
  box-shadow: inset 4px 0 0 #F59E0B, var(--surface-shadow);
}

.task-card.is-telegram-inspection.is-overdue {
  box-shadow: inset 4px 0 0 #F59E0B, 0 3px 12px rgba(185, 28, 28, 0.14);
}

.task-card:active {
  transform: scale(0.98);
  box-shadow: var(--shadow-sm);
}

.task-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.task-card-date {
  font-size: 12px;
  color: var(--text-secondary);
}

.task-card-statuses,
.case-hero-statuses {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.telegram-inspection-badge {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 7px;
  border-radius: 6px;
  background: #FFF7ED;
  color: #B45309;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 800;
}

.telegram-inspection-badge svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.telegram-inspection-badge span {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

/* Бейдж статуса */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-badge.new .status-dot { background: var(--primary); }
.status-badge.new { color: var(--primary); }

.status-badge.scheduled .status-dot { background: var(--warning); }
.status-badge.scheduled { color: var(--warning); }

.status-badge.awaiting_act .status-dot { background: #6366F1; }
.status-badge.awaiting_act { color: #4F46E5; }

.status-badge.ready .status-dot { background: var(--success); }
.status-badge.ready { color: var(--success); }

.status-badge.missed_inspection,
.status-badge.new_overdue,
.status-badge.task_overdue {
  color: #DC2626;
  font-weight: 700;
}

.status-badge.missed_inspection .status-dot,
.status-badge.new_overdue .status-dot,
.status-badge.task_overdue .status-dot {
  background: var(--danger);
}

.task-card-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.task-card-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 0;
}

.task-card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.task-card-appointment time {
  font-variant-numeric: tabular-nums;
}

.task-meta-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: 13px;
  color: var(--text-secondary);
}

.task-meta-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.task-meta-row svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.task-card-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  margin-bottom: 2px;
}

.task-card-vehicle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.task-card-vehicle span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.plate-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid #CBD5E1;
  border-radius: 5px;
  background: #F8FAFC;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

/* Пустое состояние */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: 60px var(--spacing-md);
  text-align: center;
}

.empty-state svg {
  width: 64px;
  height: 64px;
  stroke: var(--border);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.empty-state-sub {
  font-size: 14px;
  color: var(--text-secondary);
  opacity: 0.7;
}

/* Скелетон загрузки задач */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, #f0f0f0 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
  border-radius: var(--radius-sm);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-card {
  background: var(--bg-card);
  border-radius: var(--surface-radius);
  padding: var(--spacing-md);
  box-shadow: var(--surface-shadow);
}

.skeleton-line {
  height: 12px;
  margin-bottom: 8px;
}

/* ─── Страница деталей задачи ────────────────────────────────────────────── */

.detail-back-bar {
  width: 100%;
  padding: var(--spacing-sm) 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}

.detail-page > .detail-back-bar,
.archive-page > .detail-back-bar {
  width: calc(100% + (var(--spacing-md) * 2));
  margin-left: calc(-1 * var(--spacing-md));
  margin-right: calc(-1 * var(--spacing-md));
}

.detail-back-bar > .skeleton {
  margin-left: auto;
  margin-right: auto;
  max-width: calc(var(--content-max-width) - 32px);
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--primary);
  cursor: pointer;
  font-family: inherit;
  padding: 4px var(--spacing-md);
}

.back-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Адрес осмотра */
#task-map {
  width: 100%;
  flex-shrink: 0;
}

.detail-section-location {
  padding-bottom: 12px;
}

.location-address-block {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #E2E8F0;
  border-radius: var(--radius-sm);
  background: #F8FAFC;
}

.location-map-frame {
  position: relative;
  height: clamp(170px, 48vw, 230px);
  border-radius: var(--radius-sm);
  background: var(--border);
  overflow: hidden;
}

.location-map-frame iframe,
.location-map-image,
.location-map-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.location-map-canvas {
  position: relative;
  z-index: 0;
}

.location-map-recenter {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: calc(100% - 68px);
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.2);
  color: var(--primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  touch-action: manipulation;
}

.location-map-recenter[hidden] {
  display: none;
}

.location-map-recenter svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.location-map-recenter span {
  min-width: 0;
  overflow-wrap: break-word;
}

.location-map-recenter:focus-visible {
  outline: 3px solid rgba(0, 168, 255, 0.3);
  outline-offset: 2px;
}

.location-map-recenter:active {
  transform: translateY(1px);
}

html.ui-density-compact .location-map-recenter {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 11px;
}

.location-map-image {
  object-fit: cover;
}

.location-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 700;
}

.location-map-unavailable-state {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #F8FAFC;
}

.location-map-unavailable {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 18px clamp(12px, 5vw, 24px);
  color: var(--text-secondary);
  text-align: center;
}

.location-map-unavailable svg {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.location-map-unavailable strong,
.location-map-unavailable span {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

.location-map-unavailable strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.25;
}

.location-map-unavailable span {
  font-size: 12px;
  line-height: 1.35;
}

.location-map-retry {
  width: min(100%, 180px);
  min-height: 36px;
  margin-top: 2px;
  padding: 7px 14px;
}

html.ui-density-compact .location-map-unavailable {
  gap: 5px;
  padding: 10px clamp(10px, 3vmin, 16px);
}

html.ui-density-compact .location-map-unavailable svg {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}

html.ui-density-compact .location-map-retry {
  min-height: 34px;
  padding-block: 6px;
}

.location-map-canvas .leaflet-control-attribution {
  font-size: 10px;
  line-height: 1.2;
  opacity: 0.82;
}

.location-card-kicker {
  font-size: 12px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--text-secondary);
}

.location-card-address {
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.detail-page {
  min-height: 100%;
  background: var(--bg);
  padding: 0 var(--spacing-md) var(--spacing-md);
}

.detail-page > .case-hero,
.detail-page > .detail-section,
.detail-page > .detail-disclosure {
  border: none;
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
  overflow: hidden;
  margin-top: var(--surface-gap);
}

.case-hero {
  background: var(--bg-card);
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border);
}

.case-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.case-external-status {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--soft-green);
  color: #047857;
  font-size: 12px;
  font-weight: 700;
}

.case-hero h1 {
  font-size: 24px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--ink);
}

.case-hero p {
  margin-top: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.detail-section {
  padding: var(--spacing-md);
  background: var(--bg-card);
}

.detail-section + .detail-section {
  margin-top: var(--surface-gap);
}

.detail-page > .telegram-inspection-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  background: #FFF7ED;
  box-shadow: inset 4px 0 0 #F59E0B, var(--surface-shadow);
}

.telegram-inspection-notice-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #FFEDD5;
  color: #B45309;
}

.telegram-inspection-notice-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.telegram-inspection-notice strong {
  display: block;
  color: #92400E;
  font-size: 15px;
  line-height: 1.25;
}

.telegram-inspection-notice p {
  margin-top: 4px;
  color: #78350F;
  font-size: 13px;
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: break-word;
}

.detail-section-heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.detail-section-heading > svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.detail-section-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #ECFEFF;
  color: #0F766E;
  box-shadow: inset 0 0 0 1px rgba(15, 118, 110, 0.12);
  flex-shrink: 0;
}

.detail-section-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.detail-section-icon-blue {
  background: var(--soft-blue);
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 1px rgba(16, 151, 221, 0.14);
}

.detail-section-icon-green {
  background: var(--soft-green);
  color: #047857;
  box-shadow: inset 0 0 0 1px rgba(4, 120, 87, 0.13);
}

.detail-section-icon-orange {
  background: var(--soft-orange);
  color: #C2410C;
  box-shadow: inset 0 0 0 1px rgba(194, 65, 12, 0.13);
}

.detail-section-icon-red {
  background: #FEF2F2;
  color: #DC2626;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.13);
}

.detail-section-heading h2 {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-sm);
}

.insurance-company-card strong {
  min-width: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 800;
  word-break: normal;
  overflow-wrap: break-word;
}

.insurance-company-documents-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.insurance-company-document {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(0, 168, 255, 0.28);
  border-radius: var(--radius-sm);
  background: var(--soft-blue);
  color: var(--primary-dark);
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
}

.insurance-company-document-view {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.insurance-company-document-view span {
  min-width: 0;
  font-weight: 700;
  word-break: normal;
  overflow-wrap: break-word;
}

.insurance-company-document-view b {
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

.insurance-company-document-view:disabled,
.insurance-company-document-download:disabled {
  cursor: wait;
  opacity: 0.65;
}

.insurance-company-document > svg,
.insurance-company-document-download svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.insurance-company-document-download {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--primary-dark);
  cursor: pointer;
}

.insurance-company-documents-empty {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.contact-main {
  min-width: 0;
}

.contact-name {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.contact-phone {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
}

.contact-call-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: 13px;
  line-height: 1.15;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.contact-call-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.appointment-section {
  border-top: none;
}

.appointment-section:not(.appointment-section-locked) .detail-section-heading {
  margin-bottom: 10px;
}

.appointment-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.appointment-native-picker {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.appointment-native-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 0.56fr);
  gap: 8px;
}

.appointment-native-field {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.appointment-native-field span {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
}

.appointment-native-input {
  width: 100%;
  min-height: 38px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #F8FAFC;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  color-scheme: light;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.appointment-native-input:focus {
  border-color: rgba(0, 168, 255, 0.55);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.08);
}

.appointment-native-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  display: none;
  -webkit-appearance: none;
}

.appointment-native-input::-webkit-inner-spin-button {
  display: none;
}

.appointment-picker-hint {
  display: block;
  min-height: 16px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.3;
}

.appointment-picker-invalid .appointment-picker-hint {
  display: block;
  color: var(--danger);
  font-weight: 700;
}

.appointment-picker-invalid .appointment-native-input {
  border-color: rgba(239, 68, 68, 0.6);
  background: #FFFBFB;
}

.appointment-submit {
  min-height: 40px;
  padding-top: 9px;
  padding-bottom: 9px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 700;
}

.appointment-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding-top: var(--spacing-xs);
}

.appointment-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}

.appointment-note {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.telegram-appointment-note {
  margin-top: 7px;
  color: #92400E;
  font-weight: 600;
}

.appointment-status {
  flex-shrink: 0;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--soft-green);
  color: #047857;
  font-size: 12px;
  font-weight: 700;
}

.inspection-start-btn {
  width: 100%;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 7px;
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.inspection-start-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.act-section {
  overflow: hidden;
}

.act-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inspection-queued-notice,
.act-queued-notice {
  min-width: 0;
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.inspection-queued-notice {
  margin-top: 12px;
}

.act-preview {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFC;
}

.act-note {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 800;
  text-align: center;
}

.act-preview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.act-preview-head span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
}

.act-preview-head button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--text-secondary);
  cursor: pointer;
}

.act-preview-head svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.act-photo-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}

.act-ready + .act-photo-strip {
  margin-top: 10px;
}

.act-photo-strip span,
.act-photo-strip button {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: #FFFFFF;
  overflow: hidden;
}

.act-photo-strip button {
  cursor: pointer;
}

.act-photo-strip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.act-photo-strip b {
  position: absolute;
  left: 4px;
  bottom: 4px;
  min-width: 18px;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #FFFFFF;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
  text-align: center;
}

.act-camera-media,
.act-review-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.act-camera-media {
  object-fit: cover;
}

.act-review-media {
  object-fit: contain;
  background: #000000;
}

#act-canvas {
  display: none;
}

.act-ready {
  padding: 11px 12px;
  border-radius: 8px;
  background: var(--soft-green);
  color: #047857;
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}

.act-camera.act-review-mode .inspection-camera-controls,
.act-camera.act-review-mode .inspection-bottom-hint {
  display: none;
}

.detail-info-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.info-row {
  display: grid;
  grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
  gap: var(--spacing-md);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.info-row:last-child {
  border-bottom: none;
}

.info-row-wide {
  grid-template-columns: 1fr;
  gap: 3px;
}

.info-label {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.35;
}

.info-value {
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.info-row-muted .info-value {
  color: var(--text-secondary);
}

.detail-disclosure {
  margin-top: var(--surface-gap);
  background: var(--bg-card);
}

.detail-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-disclosure summary::-webkit-details-marker {
  display: none;
}

.detail-disclosure summary svg {
  width: 18px;
  height: 18px;
  stroke: var(--text-secondary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s;
}

.detail-disclosure[open] summary svg {
  transform: rotate(180deg);
}

.detail-disclosure .detail-info-list {
  margin: 0 var(--spacing-md) var(--spacing-md);
}

.task-document-list {
  display: grid;
  gap: 8px;
}

.task-document-offline-status {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.task-documents-empty {
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: #F8FAFC;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.task-documents-empty-icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--soft-blue);
  color: var(--primary-dark);
  box-shadow: inset 0 0 0 1px rgba(16, 151, 221, 0.14);
}

.task-documents-empty-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.task-document-card {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid rgba(0, 168, 255, 0.28);
  border-radius: var(--radius-sm);
  background: var(--soft-blue);
  color: var(--primary-dark);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, background-color 0.15s;
}

.task-document-card:active {
  transform: scale(0.985);
  background: #E0F2FE;
}

.task-document-name {
  min-width: 0;
  font-weight: 700;
  word-break: normal;
  overflow-wrap: break-word;
}

.task-document-card b {
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

.task-document-card svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.task-document-card .detail-section-icon svg {
  stroke-width: 1.7;
}

.document-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.document-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.64);
}

.document-preview-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #E8EDF3;
}

.document-preview-header {
  min-height: calc(58px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px 16px;
  border-bottom: 1px solid var(--border);
  background: #FFFFFF;
  box-shadow: 0 1px 8px rgba(15, 23, 42, 0.08);
}

.document-preview-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.document-preview-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.document-preview-heading strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-preview-heading span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.2;
}

html.ui-density-compact .document-preview-header {
  flex-wrap: wrap;
}

html.ui-density-compact .document-preview-heading {
  flex: 1 1 220px;
}

html.ui-density-compact .document-preview-heading strong {
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

html.ui-density-compact .document-preview-actions {
  margin-left: auto;
}

.document-preview-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #F1F5F9;
  color: var(--ink);
  cursor: pointer;
}

.document-preview-zoom,
.document-preview-zoom-level {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: #F1F5F9;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.document-preview-zoom {
  width: 34px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.document-preview-zoom-level {
  min-width: 50px;
  padding: 0 7px;
  color: var(--text-secondary);
  font-size: 11px;
}

.document-preview-close svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.document-preview-content {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 12px;
  overflow: auto;
  background: #DDE3EA;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
  cursor: grab;
  user-select: none;
}

.document-preview-content:active {
  cursor: grabbing;
}

.document-preview-content.is-native-file {
  padding: 0;
  overflow: hidden;
  touch-action: auto;
  cursor: default;
}

.document-preview-content.is-native-file:active {
  cursor: default;
}

.document-preview-file {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #FFFFFF;
}

.document-preview-modal.is-native-file .document-preview-zoom,
.document-preview-modal.is-native-file .document-preview-zoom-level {
  display: none;
}

.document-preview-pages {
  width: 100%;
  min-width: 100%;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  transform-origin: left top;
}

.document-preview-page {
  width: 100%;
  height: auto;
  display: block;
  flex: 0 0 auto;
  background: #FFFFFF;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.18);
  -webkit-user-drag: none;
}

.document-preview-pdf-page {
  position: relative;
  overflow: hidden;
}

.document-preview-pdf-page canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.document-preview-loading,
.document-preview-error {
  width: 100%;
  min-height: 100%;
  padding: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-secondary);
  text-align: center;
}

.document-preview-loading span {
  width: 28px;
  height: 28px;
  border: 3px solid #CBD5E1;
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.document-preview-loading strong,
.document-preview-error strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.document-preview-error span {
  max-width: 300px;
  font-size: 12px;
  line-height: 1.4;
}

@media (min-width: 700px) {
  .document-preview-panel {
    max-width: 900px;
    margin: 24px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.3);
  }

  .document-preview-content {
    padding: 18px;
  }

  .document-preview-pages {
    gap: 18px;
  }
}

@media (max-width: 480px) {
  .document-preview-header {
    gap: 8px;
    padding-left: 12px;
  }

  .document-preview-heading span {
    display: none;
  }

  .document-preview-actions {
    gap: 3px;
  }

  .document-preview-zoom,
  .document-preview-close {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .document-preview-zoom-level {
    min-width: 45px;
    height: 34px;
    padding: 0 5px;
  }
}

/* Маркер на карте */
.map-marker,
.location-map-marker {
  position: relative;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
}

.location-map-marker-pin,
.map-marker::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0;
  width: 28px;
  height: 28px;
  background: var(--primary);
  border: 3px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 8px rgba(0,168,255,0.5);
}

.location-map-marker-pin::after,
.map-marker::after {
  content: none;
}

/* Детали задачи */
.detail-card {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.detail-number {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
}

.detail-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-secondary);
  margin-bottom: var(--spacing-sm);
}

.detail-car {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-md);
}

.detail-car svg {
  width: 32px;
  height: 32px;
  stroke: var(--primary);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.detail-car-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.detail-car-year {
  font-size: 13px;
  color: var(--text-secondary);
}

.detail-meta-list {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.detail-meta-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}

.detail-meta-row:last-child { border-bottom: none; }

.detail-meta-row svg {
  width: 16px;
  height: 16px;
  stroke: var(--text-secondary);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  margin-top: 1px;
}

.detail-description {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-md);
  font-size: 14px;
  color: var(--text-primary);
  line-height: 1.6;
}

.detail-maps-btn {
  margin-top: var(--spacing-sm);
  min-height: 42px;
  font-size: 14px;
  border-radius: 7px;
}

.detail-maps-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── Фотоосмотр ─────────────────────────────────────────────────────────── */
.inspection-page {
  min-height: 100%;
  background: var(--bg);
  padding: 0 var(--spacing-md) var(--spacing-md);
}

.inspection-hero,
.inspection-block,
.inspection-submit-panel,
.inspection-sent-footer,
.inspection-locked,
.inspection-ho-entry,
.inspection-ho-choice,
.inspection-ho-warning,
.inspection-ho-wait,
.inspection-ho-actions {
  width: 100%;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
}

.inspection-page > .detail-back-bar {
  width: calc(100% + (var(--spacing-md) * 2));
  margin-left: calc(-1 * var(--spacing-md));
  margin-right: calc(-1 * var(--spacing-md));
}

.inspection-hero {
  margin-top: var(--surface-gap);
  padding: var(--spacing-md);
  border-radius: var(--surface-radius);
  background: var(--bg-card);
  box-shadow: var(--surface-shadow);
}

.inspection-kicker {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.inspection-hero h1 {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 800;
}

.inspection-hero p {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.35;
}

.inspection-block-list {
  display: flex;
  flex-direction: column;
  gap: var(--surface-gap);
  margin-top: var(--surface-gap);
}

.inspection-block {
  padding: var(--spacing-md);
  border-radius: var(--surface-radius);
  background: var(--bg-card);
  box-shadow: var(--surface-shadow);
}

.inspection-block-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--spacing-md);
  margin-bottom: 12px;
}

.inspection-block-head h2 {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.inspection-block-head p {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.inspection-count {
  min-width: 42px;
  display: inline-grid;
  align-items: center;
  justify-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: #F1F5F9;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

@keyframes inspection-photo-counter-bounce {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-5px) scale(1.12); }
  64% { transform: translateY(0) scale(0.97); }
  82% { transform: translateY(-1px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .inspection-top-badge.is-confirmed {
    animation: none;
  }
}

.inspection-doc-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.inspection-doc-choice button {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #F8FAFC;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.inspection-doc-choice button.active {
  border-color: rgba(0, 168, 255, 0.55);
  background: var(--soft-blue);
  color: var(--primary-dark);
}

.inspection-doc-summary {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #F8FAFC;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
  text-align: center;
}

.inspection-extra-doc-control {
  margin-bottom: 12px;
}

.inspection-extra-doc-control select {
  width: 100%;
  height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
}

.inspection-extra-doc-control select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.12);
}

.inspection-extra-doc-panels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inspection-extra-doc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inspection-extra-doc-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFC;
  overflow: hidden;
}

.inspection-extra-doc-panel.is-selected {
  border-color: rgba(0, 168, 255, 0.28);
  background: #F8FBFF;
}

.inspection-extra-doc-panel.is-complete {
  border-color: rgba(16, 185, 129, 0.45);
  background: #F7FFFB;
}

.inspection-extra-doc-panel summary {
  min-height: 46px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  list-style: none;
}

.inspection-extra-doc-panel summary::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}

.inspection-extra-doc-panel[open] summary::before {
  transform: rotate(45deg);
}

.inspection-extra-doc-panel summary::-webkit-details-marker {
  display: none;
}

.inspection-extra-doc-panel summary span {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 800;
  overflow-wrap: break-word;
  word-break: normal;
}

.inspection-extra-doc-panel summary button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: #FFFFFF;
  color: var(--text-secondary);
  cursor: pointer;
}

.inspection-extra-doc-panel summary b {
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--soft-blue);
  color: var(--primary-dark);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
}

.inspection-extra-doc-panel summary button svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.inspection-extra-doc-panel > .inspection-shot-list {
  padding: 0 8px 8px;
}

.inspection-extra-doc-requirement {
  margin: 0;
  padding: 0 10px 8px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: normal;
}

.inspection-field {
  display: block;
  margin-top: 12px;
}

.inspection-field span {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
}

.inspection-field input {
  width: 100%;
  height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
}

.inspection-field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.12);
}

.inspection-block-empty {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.inspection-block-empty {
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: #F8FAFC;
}

.inspection-shot-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.inspection-shot {
  width: 100%;
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFC;
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.inspection-shot:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.inspection-shot.filled {
  border-color: rgba(16, 185, 129, 0.45);
  background: #F7FFFB;
}

.inspection-shot-preview {
  width: 54px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #FFFFFF;
  overflow: hidden;
}

.inspection-shot-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.inspection-shot-preview svg {
  width: 22px;
  height: 22px;
  stroke: var(--text-secondary);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inspection-shot-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.inspection-shot-label {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  overflow-wrap: break-word;
  word-break: normal;
}

.inspection-shot-optional {
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
}

.inspection-additional-photo-groups {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.inspection-damage-required-list + .inspection-additional-photo-groups {
  margin-top: 12px;
}

.inspection-additional-photo-group {
  min-width: 0;
}

.inspection-additional-photo-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFC;
  overflow: hidden;
}

.inspection-additional-photo-action {
  width: 100%;
  min-width: 0;
  min-height: 66px;
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.inspection-additional-photo-action:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.inspection-additional-photo-summary {
  cursor: default;
}

.inspection-additional-photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(54px, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.inspection-additional-photo-card > .inspection-additional-photo-strip {
  margin-top: 0;
  padding: 0 9px 9px;
}

.inspection-additional-photo-strip button {
  position: relative;
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #FFFFFF;
  overflow: hidden;
}

.inspection-additional-photo-strip img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.inspection-additional-photo-strip span {
  position: absolute;
  left: 4px;
  bottom: 4px;
  min-width: 18px;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #FFFFFF;
  font-size: 10px;
  line-height: 1.2;
  font-weight: 800;
}

.inspection-submit-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--surface-gap);
  padding: 10px 12px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--surface-radius);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
}

.inspection-submit-title {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 800;
}

.inspection-submit-btn {
  min-height: 38px;
  min-width: 108px;
  padding: 8px 12px;
  border-radius: 7px;
  font-size: 13px;
}

.inspection-sent-footer {
  margin-top: var(--surface-gap);
  padding: 0 2px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 800;
  text-align: center;
}

.inspection-complete-panel {
  width: 100%;
  max-width: var(--content-max-width);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--surface-gap);
  margin-left: auto;
  margin-right: auto;
  padding: 12px;
  border-radius: var(--surface-radius);
  background: var(--soft-green);
  color: #047857;
}

.inspection-complete-panel h2 {
  color: #047857;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 800;
}

.inspection-complete-panel p {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.inspection-locked {
  margin-top: var(--surface-gap);
}

.inspection-locked p {
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
}

.inspection-geo-gate {
  width: 100%;
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--surface-gap);
  border: none;
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
  overflow: hidden;
}

.inspection-geo-copy {
  margin-bottom: 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.4;
}

.inspection-geo-address {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFC;
}

.inspection-geo-address span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
}

.inspection-geo-address strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
}

.inspection-geo-error,
.inspection-geo-warning,
.inspection-geo-ok {
  margin-bottom: 12px;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
}

.inspection-geo-error {
  background: #FEF2F2;
  color: var(--danger);
  font-weight: 700;
}

.inspection-geo-warning {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #FFF7ED;
  color: #9A3412;
}

.inspection-geo-warning strong {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
}

.inspection-geo-warning span {
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
}

.inspection-geo-ok {
  background: var(--soft-green);
  color: #047857;
  font-weight: 800;
}

.inspection-geo-reason-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inspection-geo-reason-form label,
.inspection-geo-reason-form label span {
  display: block;
}

.inspection-geo-reason-form label span {
  margin-bottom: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 800;
  text-transform: uppercase;
}

.inspection-geo-reason-form textarea {
  width: 100%;
  min-height: 104px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
}

.inspection-geo-reason-form textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.12);
}

.inspection-geo-unavailable-btn {
  margin-top: 10px;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

#inspection-geo-unavailable-form {
  margin-top: 12px;
  min-width: 0;
}

#inspection-geo-unavailable-form[hidden] {
  display: none;
}

html.ui-density-compact .inspection-geo-gate .btn {
  min-width: 0;
  height: auto;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

html.ui-density-compact .inspection-geo-reason-form,
html.ui-density-compact .inspection-geo-reason-form label,
html.ui-density-compact .inspection-geo-reason-form textarea {
  min-width: 0;
  max-width: 100%;
}

.inspection-camera {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  background: #000000;
  overflow: hidden;
  touch-action: none;
}

.inspection-camera-frame {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.inspection-camera-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #000000;
}

#inspection-video,
#inspection-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

#inspection-video,
#act-video {
  --camera-digital-zoom: 1;
  --camera-mirror: 1;
  transform: scaleX(var(--camera-mirror)) scale(var(--camera-digital-zoom));
  transform-origin: 50% 50%;
  will-change: transform;
}

.archive-photo-access-card {
  padding-top: 2px;
}

.archive-photo-access-top {
  display: flex;
  align-items: center;
}

.archive-photo-access-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.archive-photo-access-card p {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.4;
}

.archive-photo-access-reason {
  margin-top: 10px;
  color: #991B1B;
  font-size: 12px;
  line-height: 1.4;
}

.archive-photo-request-form {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.archive-photo-request-input {
  min-height: 84px;
  padding: 10px 12px;
  border-width: 1px;
  border-radius: 7px;
  background: #F8FAFC;
  font-size: 14px;
  resize: vertical;
  line-height: 1.4;
}

.archive-photo-request-btn {
  margin-top: 2px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 800;
}

.inspection-shot-preview img,
.inspection-additional-photo-strip img,
.act-photo-strip img,
.act-camera-media,
.act-review-media,
[data-protected-src] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

#inspection-video.mirror {
  --camera-mirror: -1;
}

#inspection-canvas {
  display: none;
}

#inspection-pinned {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  width: clamp(88px, 24vmin, 116px);
  max-height: clamp(76px, 21vmin, 104px);
  display: none;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background: #FFFFFF;
  object-fit: contain;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.inspection-lens-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  width: 104px;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
}

.inspection-lens-btn {
  min-width: 0;
  min-height: 34px;
  padding: 7px 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}

.inspection-lens-btn.active {
  background: var(--primary);
  color: var(--text-on-primary);
  box-shadow: 0 3px 10px rgba(0, 168, 255, 0.34);
}

.inspection-lens-btn:disabled {
  opacity: 0.5;
  cursor: wait;
}

.inspection-camera-stage.focus-enabled {
  cursor: crosshair;
}

.inspection-camera-stage.is-switching-camera::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-top-color: #FFFFFF;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  pointer-events: none;
}

.inspection-focus-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border: 2px solid #FFFFFF;
  border-radius: 8px;
  color: #FFFFFF;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.5));
}

.inspection-focus-indicator span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: currentColor;
}

.inspection-focus-indicator.is-focusing {
  animation: inspection-focus-pulse 0.38s ease-out;
}

.inspection-focus-indicator.is-focused {
  border-color: #34D399;
  color: #34D399;
}

.inspection-focus-indicator.is-error {
  border-color: #FCA5A5;
  color: #FCA5A5;
}

@keyframes inspection-focus-pulse {
  from { transform: translate(-50%, -50%) scale(1.35); opacity: 0.4; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.inspection-top-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 4;
  min-width: 58px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 800;
}

.inspection-car-mask,
.inspection-vin-mask,
.inspection-odo-mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.inspection-car-mask.show,
.inspection-vin-mask.show,
.inspection-odo-mask.show {
  display: flex;
}

.inspection-car-mask img {
  width: 92%;
  max-width: 95vw;
  max-height: 70vh;
  object-fit: contain;
}

.inspection-camera.landscape-required .inspection-car-mask img {
  width: 98%;
  max-width: none;
  max-height: 92%;
}

.inspection-vin-mask div,
.inspection-odo-mask div {
  position: relative;
  border: 2.5px solid var(--primary);
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.12);
}

.inspection-vin-mask div {
  width: 80%;
  max-width: 500px;
  aspect-ratio: 4 / 1;
}

.inspection-odo-mask div {
  width: 70%;
  max-width: 420px;
  aspect-ratio: 3 / 1;
}

.inspection-vin-mask span,
.inspection-odo-mask span {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  color: #E0F2FE;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.inspection-bottom-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 44px 20px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  color: #FFFFFF;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 800;
  text-align: center;
}

.inspection-dark-warning {
  position: absolute;
  left: 50%;
  bottom: 86px;
  z-index: 5;
  transform: translateX(-50%);
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.92);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.inspection-camera-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 8;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.42);
  color: #FFFFFF;
}

.inspection-camera-close svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.inspection-camera-controls {
  --inspection-controls-size: 116px;
  min-height: calc(var(--inspection-controls-size) + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px calc(16px + env(safe-area-inset-bottom));
  background: var(--bg-card);
}

.inspection-step-info {
  min-height: 20px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.inspection-step-info:empty {
  display: none;
}

.inspection-capture-controls {
  position: relative;
  width: 100%;
  max-width: 360px;
  height: 72px;
}

.inspection-capture-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72px;
  height: 72px;
  inline-size: 72px;
  block-size: 72px;
  min-width: 72px;
  min-height: 72px;
  max-width: 72px;
  max-height: 72px;
  flex: 0 0 72px;
  aspect-ratio: 1;
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 4px solid var(--primary);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.inspection-capture-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--primary);
}

.inspection-capture-btn:active::after {
  width: 48px;
  height: 48px;
}

.inspection-flash-btn {
  position: absolute;
  left: calc(50% - 86px);
  top: 50%;
  width: 48px;
  height: 48px;
  inline-size: 48px;
  block-size: 48px;
  min-width: 48px;
  min-height: 48px;
  max-width: 48px;
  max-height: 48px;
  flex: 0 0 48px;
  aspect-ratio: 1;
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #0F172A;
  color: #FFFFFF;
  cursor: pointer;
}

.inspection-flash-btn.disabled {
  opacity: 0.35;
}

.inspection-flash-btn.active {
  color: #FACC15;
}

.inspection-flash-btn svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
}

.inspection-additional-done-btn {
  position: absolute;
  left: calc(50% + 106px);
  top: 50%;
  min-height: 44px;
  padding: 10px 17px;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: var(--text-on-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 168, 255, 0.28);
}

.inspection-capture-btn:disabled,
.inspection-additional-done-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.inspection-preview-controls {
  width: 100%;
  max-width: 360px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.inspection-preview-controls.is-readonly {
  grid-template-columns: minmax(0, 1fr);
}

.inspection-review-mode #inspection-preview {
  object-fit: contain;
  background: #000000;
}

.inspection-review-mode .inspection-bottom-hint {
  padding-top: 24px;
}

#inspection-camera .inspection-camera-frame {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

#inspection-camera .inspection-camera-viewport {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000000;
}

#inspection-camera .inspection-camera-stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

#inspection-camera .inspection-camera-controls {
  position: relative;
  order: 2;
  --inspection-controls-size: 116px;
  box-sizing: border-box;
  flex: 0 0 calc(var(--inspection-controls-size) + env(safe-area-inset-bottom));
  width: 100%;
  height: calc(var(--inspection-controls-size) + env(safe-area-inset-bottom));
  min-height: calc(var(--inspection-controls-size) + env(safe-area-inset-bottom));
  max-height: calc(var(--inspection-controls-size) + env(safe-area-inset-bottom));
}

#inspection-camera .inspection-car-mask img {
  width: 98%;
  max-width: 98%;
  max-height: 92%;
}

#inspection-camera.camera-needs-rotate .inspection-bottom-hint {
  display: none;
}

.inspection-orientation-prompt {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  background: #07111D;
  color: #FFFFFF;
  text-align: center;
  pointer-events: none;
}

#inspection-camera.camera-needs-rotate .inspection-orientation-prompt {
  display: flex;
}

.inspection-ho-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-md);
  margin-top: var(--surface-gap);
  padding: var(--spacing-md);
  border: 1px solid #FDBA74;
  border-radius: var(--surface-radius);
  background: #FFF7ED;
  box-shadow: var(--surface-shadow);
}

.inspection-ho-entry h2,
.inspection-ho-choice strong,
.inspection-ho-choice span,
.inspection-ho-warning strong,
.inspection-ho-warning span,
.inspection-ho-vehicle-note strong,
.inspection-ho-vehicle-note span,
.inspection-ho-wait strong,
.inspection-ho-wait p,
.inspection-ho-actions p {
  overflow-wrap: break-word;
  word-break: normal;
}

.inspection-ho-entry h2 {
  color: #9A3412;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
}

.inspection-ho-entry p {
  margin-top: 4px;
  color: #9A3412;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

.inspection-ho-entry-btn {
  min-width: 118px;
  min-height: 40px;
  border: 1px solid #EA580C;
  background: #EA580C;
  color: #FFFFFF;
}

.inspection-ho-choice {
  margin-top: var(--surface-gap);
  padding: var(--spacing-md);
  border-radius: var(--surface-radius);
  background: var(--bg-card);
  box-shadow: var(--surface-shadow);
}

.inspection-ho-choice-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.inspection-ho-choice-list > button {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #F8FAFC;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.inspection-ho-choice-list > button:active {
  border-color: var(--primary);
  background: var(--soft-blue);
}

.inspection-ho-choice-list strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;
}

.inspection-ho-choice-list span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

.inspection-ho-regular-btn {
  margin-top: 12px;
}

.inspection-ho-warning {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--surface-gap);
  padding: 12px var(--spacing-md);
  border: 1px solid #FDBA74;
  border-radius: var(--surface-radius);
  background: #FFF7ED;
  color: #9A3412;
}

.inspection-ho-warning strong {
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
}

.inspection-ho-warning span {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}

.inspection-ho-wait {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--surface-gap);
  padding: var(--spacing-md);
  border: 1px solid #93C5FD;
  border-radius: var(--surface-radius);
  background: #EFF6FF;
  color: #1E3A8A;
  box-shadow: var(--surface-shadow);
}

.inspection-ho-wait.is-ready,
.inspection-ho-wait.is-complete {
  border-color: #86EFAC;
  background: #F0FDF4;
  color: #166534;
}

.inspection-ho-wait.is-locked {
  border-color: var(--border);
  background: #F8FAFC;
  color: var(--text-secondary);
}

.inspection-ho-wait strong {
  color: currentColor;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
}

.inspection-ho-wait p {
  color: currentColor;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 650;
}

.inspection-ho-wait time {
  color: currentColor;
  font-size: clamp(24px, 8vw, 34px);
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.inspection-ho-repeat-list {
  margin-top: var(--surface-gap);
}

.inspection-ho-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--surface-gap);
  padding: 12px var(--spacing-md);
  border-radius: var(--surface-radius);
  background: var(--bg-card);
  box-shadow: var(--surface-shadow);
}

.inspection-ho-actions p {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}

.inspection-ho-vehicle-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.inspection-ho-vehicle-note strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
}

.inspection-ho-vehicle-note span {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}

.inspection-ho-actions .inspection-ho-regular-btn {
  margin-top: 0;
}

.inspection-orientation-prompt strong {
  max-width: 320px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
}

.inspection-zoom-badge {
  position: absolute;
  top: 16px;
  left: 50%;
  z-index: 6;
  min-width: 50px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.68);
  color: #FFFFFF;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  pointer-events: none;
}

.inspection-top-badge.is-confirmed {
  background: rgba(5, 150, 105, 0.92);
  border-color: rgba(167, 243, 208, 0.68);
  box-shadow: 0 8px 20px rgba(5, 150, 105, 0.3);
  animation: inspection-photo-counter-bounce 0.46s cubic-bezier(0.22, 0.9, 0.3, 1.2);
}

.inspection-orientation-prompt span {
  color: #B9C7D8;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
}

.inspection-orientation-phone {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  color: var(--primary);
  animation: inspection-phone-turn 1.8s ease-in-out infinite;
}

.inspection-orientation-phone svg {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#inspection-camera.camera-needs-rotate .inspection-camera-close {
  position: fixed;
  z-index: 22;
}

@keyframes inspection-phone-turn {
  0%, 18% {
    transform: rotate(0deg);
  }
  58%, 100% {
    transform: rotate(90deg);
  }
}

@media (orientation: landscape) {
  #inspection-camera .inspection-camera-frame {
    flex-direction: row;
  }

  #inspection-camera .inspection-camera-viewport {
    order: 1;
    flex: 1 1 auto;
  }

  #inspection-camera .inspection-camera-stage {
    width: 100%;
    height: 100%;
  }

  #inspection-camera .inspection-camera-controls {
    order: 2;
    flex: 0 0 calc(var(--inspection-controls-size) + env(safe-area-inset-right));
    width: calc(var(--inspection-controls-size) + env(safe-area-inset-right));
    height: 100%;
    min-height: 0;
    max-height: none;
    gap: 8px;
    padding: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) 10px;
    border-left: 1px solid var(--border);
  }

  #inspection-camera .inspection-step-info {
    max-width: 104px;
    min-height: 0;
    font-size: 12px;
    line-height: 1.25;
  }

  #inspection-camera .inspection-capture-controls {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 154px;
    display: block;
  }

  #inspection-camera .inspection-capture-btn,
  #inspection-camera .inspection-flash-btn {
    position: absolute;
    flex-shrink: 0;
    border-radius: 999px;
  }

  #inspection-camera .inspection-flash-btn {
    left: 50%;
    top: calc(50% + 84px);
    transform: translate(-50%, -50%);
  }

  #inspection-camera .inspection-capture-btn {
    left: 50%;
    top: 50%;
    width: 72px !important;
    height: 72px !important;
    inline-size: 72px;
    block-size: 72px;
    transform: translate(-50%, -50%);
  }

  #inspection-camera .inspection-preview-controls {
    max-width: 92px;
    grid-template-columns: 1fr;
  }

  #inspection-camera .inspection-preview-controls .btn {
    min-height: 42px;
    padding: 9px 8px;
    font-size: 13px;
  }

  #inspection-camera .inspection-bottom-hint {
    right: 0;
    bottom: 0;
  }

  #inspection-camera .inspection-top-badge {
    top: 14px;
    left: 14px;
  }

  #inspection-camera .inspection-additional-done-btn {
    left: 50%;
    top: calc(50% - 86px);
    transform: translate(-50%, -50%);
    min-height: 40px;
    padding: 9px 13px;
    font-size: 12px;
  }
}

.inspection-guide {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.55);
  overflow-y: auto;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

.inspection-guide-card {
  width: 100%;
  max-width: 400px;
  padding: 22px;
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: 0 14px 48px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.inspection-guide-card h3 {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 800;
}

.inspection-guide-card p {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.inspection-guide-card p + .btn {
  margin-top: 20px;
}

.inspection-guide-card > img {
  width: 100%;
  max-height: 180px;
  display: block;
  margin: 14px auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  object-fit: contain;
}

.inspection-example-strip {
  display: flex;
  gap: 8px;
  margin: 14px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.inspection-example-strip img {
  height: 132px;
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFC;
  object-fit: contain;
}

.inspection-guide-note {
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  background: #FFFBEB;
  color: #92400E;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
  text-align: left;
}

/* ─── Админский раздел экспертов ─────────────────────────────────────────── */
.experts-page {
  min-height: 100%;
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
}

.expert-create-card,
.expert-card {
  background: var(--bg-card);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
}

.expert-form {
  display: flex;
  flex-direction: column;
}

.experts-section-title {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  padding: var(--surface-padding-y) var(--surface-padding-x) var(--spacing-sm);
  text-transform: uppercase;
}

.expert-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px var(--surface-padding-x);
  border-top: 1px solid var(--border);
}

.expert-field--city {
  position: relative;
}

.expert-field span,
.generated-password-label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.expert-field input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  padding: 4px 0;
}

.expert-toggle-row {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: 10px var(--surface-padding-x);
  border-top: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 500;
}

.generated-password {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-sm) var(--surface-padding-x) 0;
  padding: 10px 12px;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  background: #F0FDF4;
}

.generated-password code {
  display: block;
  margin-top: 2px;
  color: #065F46;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.7px;
  overflow-wrap: anywhere;
}

.copy-password-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  background: #FFFFFF;
  color: #047857;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.copy-password-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.expert-form > .btn {
  margin: var(--spacing-sm) var(--surface-padding-x) var(--surface-padding-y);
  width: calc(100% - (var(--surface-padding-x) * 2));
}

.experts-list-title {
  padding: 18px var(--spacing-xs) 8px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.experts-list {
  display: flex;
  flex-direction: column;
  gap: var(--surface-gap);
}

.expert-card {
  padding: var(--surface-padding-y) var(--surface-padding-x);
  cursor: pointer;
}

.expert-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.expert-card-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.expert-card-avatar {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #E0F2FE;
  color: #0369A1;
  font-size: 14px;
  font-weight: 800;
}

.expert-card-text {
  min-width: 0;
}

.expert-card-name-row {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.expert-card-name {
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.expert-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.expert-badge.admin {
  background: #EFF6FF;
  color: #1D4ED8;
}

.expert-badge.self {
  background: #F1F5F9;
  color: #475569;
}

.expert-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.3;
}

.expert-card-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.expert-card-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.expert-card-login span {
  color: var(--text-secondary);
  font-size: 12px;
}

.expert-card-login strong {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.expert-card-actions {
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.expert-card.is-expanded .expert-card-actions {
  display: grid;
}

.expert-action-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(14, 165, 233, 0.32);
  border-radius: 8px;
  background: #F0F9FF;
  color: #0369A1;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
}

.expert-action-btn.danger {
  border-color: rgba(239, 68, 68, 0.28);
  background: #FEF2F2;
  color: #B91C1C;
}

.expert-action-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.expert-action-btn:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.expert-action-btn.is-loading {
  pointer-events: none;
}

/* ─── Страница настроек ──────────────────────────────────────────────────── */
.settings-page {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--surface-gap);
}

.archive-page {
  padding-top: 0;
}

/* Секция настроек */
.settings-section {
  background: var(--bg-card);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
  overflow: visible;
}

.settings-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  padding: var(--surface-padding-y) var(--surface-padding-x) var(--spacing-sm);
}

.settings-completion-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  padding: 0 var(--surface-padding-x);
  border-top: 1px solid var(--border);
}

.settings-completion-month {
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  min-width: 0;
  padding: 12px 8px var(--surface-padding-y);
  text-align: center;
}

.settings-completion-month + .settings-completion-month {
  border-left: 1px solid var(--border);
}

.settings-completion-month-label {
  max-width: 100%;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  word-break: normal;
  overflow-wrap: break-word;
}

.settings-completion-value {
  align-self: center;
  padding: 7px 0 5px;
  color: var(--primary-dark);
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
}

.settings-completion-loading,
.settings-completion-empty,
.settings-completion-error {
  grid-column: 1 / -1;
  padding: 14px 0 2px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
}

.settings-completion-error {
  color: var(--danger);
}

.settings-document-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px var(--surface-padding-x) var(--surface-padding-y);
  border-top: 1px solid var(--border);
}

.settings-document-progress progress {
  width: 100%;
  min-width: 0;
  height: 7px;
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  color: var(--primary);
  accent-color: var(--primary);
}

.settings-document-progress progress::-webkit-progress-bar {
  background: var(--border);
  border-radius: 999px;
}

.settings-document-progress progress::-webkit-progress-value {
  background: var(--primary);
  border-radius: 999px;
}

.settings-document-progress progress::-moz-progress-bar {
  background: var(--primary);
  border-radius: 999px;
}

.settings-document-progress span {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Профиль — аватар */
.profile-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md) var(--surface-padding-x) var(--spacing-sm);
  gap: var(--spacing-sm);
}

.profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  font-weight: 700;
  color: var(--text-on-primary);
}

.profile-name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Поля профиля */
.settings-field {
  padding: 10px var(--surface-padding-x);
  border-top: 1px solid var(--border);
}

.settings-field:first-of-type {
  border-top: none;
}

.settings-field-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.settings-field-input {
  width: 100%;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: var(--text-primary);
  background: transparent;
  padding: 4px 0;
}

.settings-field-input:disabled {
  color: var(--text-secondary);
  cursor: not-allowed;
}

.settings-field-value {
  min-height: 27px;
  padding: 4px 0;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Toggle переключатель */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 10px var(--surface-padding-x);
  border-top: 1px solid var(--border);
}

.settings-row:first-child { border-top: none; }

.settings-row-label {
  min-width: 0;
  padding-right: 12px;
  font-size: 16px;
  color: var(--text-primary);
  word-break: normal;
  overflow-wrap: break-word;
}

.settings-action {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 10px var(--surface-padding-x);
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.settings-action svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.settings-action:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.settings-action.is-loading {
  pointer-events: none;
}

.settings-feedback {
  min-width: 0;
}

.settings-feedback-open {
  text-align: left;
  line-height: 1.35;
}

.settings-feedback-open span {
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

.settings-feedback-open .settings-feedback-dot {
  fill: currentColor;
  stroke: none;
}

.settings-feedback-form {
  display: grid;
  min-width: 0;
  gap: 8px;
  padding: 2px var(--surface-padding-x) 14px;
}

.settings-feedback-form[hidden] {
  display: none;
}

.settings-feedback-form label {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 700;
}

.settings-feedback-form textarea {
  width: 100%;
  min-height: 118px;
  max-height: 40vh;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: break-word;
}

.settings-feedback-form textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgb(0 168 255 / 12%);
}

.settings-feedback-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-feedback-counter {
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.settings-feedback-submit {
  min-width: 116px;
  min-height: 42px;
  padding-block: 9px;
}

.settings-feedback-status {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
}

.settings-feedback-status:empty {
  display: none;
}

.settings-feedback-status.is-error {
  color: var(--danger);
}

.settings-action-danger {
  color: var(--danger);
}

.settings-archive-state {
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 10px var(--surface-padding-x);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.35;
}

.settings-archive-state-error {
  color: var(--danger);
}

.settings-archive-online-only {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 18px var(--surface-padding-x);
  border-top: 1px solid var(--border);
  color: var(--text-secondary);
}

.settings-archive-online-icon {
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--soft-blue);
  color: var(--primary-dark);
  font-size: 18px;
  font-weight: 800;
}

.settings-archive-online-only strong,
.settings-archive-online-only span {
  word-break: normal;
  overflow-wrap: break-word;
}

.settings-archive-online-only strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.3;
}

.settings-archive-online-only > span:last-child {
  font-size: 12px;
  line-height: 1.35;
}

.task-archive-online-only {
  max-width: 440px;
  margin: var(--spacing-md) auto;
  border: 1px solid var(--border);
  border-radius: var(--surface-radius);
  background: var(--bg-card);
  box-shadow: var(--surface-shadow);
}

.settings-archive-row {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--surface-padding-x);
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-archive-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.settings-archive-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.settings-archive-sub {
  font-size: 12px;
  line-height: 1.25;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.settings-archive-meta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

.settings-archive-meta svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toggle {
  position: relative;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background 0.2s;
}

.toggle-slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle input:checked + .toggle-slider {
  background: var(--primary);
}

.toggle input:checked + .toggle-slider::before {
  transform: translateX(18px);
}

.toggle input:focus-visible + .toggle-slider {
  outline: 2px solid rgba(0, 168, 255, 0.45);
  outline-offset: 3px;
}

/* Автодополнение города */
.settings-field--city {
  position: relative;
}

.city-suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  list-style: none;
  z-index: 100;
  margin: 0;
  padding: 4px 0;
}

.city-suggestion-item {
  padding: 11px var(--spacing-md);
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
}

.city-suggestion-item:active {
  background: var(--bg);
}

/* Версия приложения */
.app-version {
  text-align: center;
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.6;
  padding: var(--spacing-sm);
}

/* Кнопка сохранения профиля */
.save-btn-wrap {
  padding: var(--spacing-sm) var(--surface-padding-x) var(--surface-padding-y);
}

/* ─── Страница календаря ────────────────────────────────────────────────── */
.calendar-page {
  min-height: 100%;
  padding: var(--spacing-sm) var(--spacing-md) calc(var(--spacing-md) + 56px);
  position: relative;
}

.calendar-list {
  display: flex;
  flex-direction: column;
  gap: var(--surface-gap);
}

.calendar-list-day {
  overflow: hidden;
  background: var(--bg-card);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
}

.calendar-list-day.is-today {
  box-shadow: 0 0 0 1px rgba(0, 168, 255, 0.22), var(--surface-shadow);
}

.calendar-list-day-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-sm);
  min-height: 58px;
  padding: 10px var(--surface-padding-x);
  border-bottom: 1px solid var(--border);
}

.calendar-list-day-title {
  min-width: 0;
}

.calendar-list-day-name {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.22;
}

.calendar-list-day-date {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.calendar-list-day-count {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 9px;
  border-radius: var(--radius-full);
  background: var(--soft-blue);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.calendar-list-day-count.is-empty {
  background: #F1F5F9;
  color: var(--text-secondary);
}

.calendar-list-day-body {
  display: flex;
  flex-direction: column;
}

.calendar-task-row {
  width: 100%;
  min-height: 58px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px var(--surface-padding-x);
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.calendar-task-row:first-child {
  border-top: none;
}

.calendar-task-row:active {
  background: #F8FAFC;
}

.calendar-task-time {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--text-on-primary);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.calendar-task-time.is-past {
  background: #F1F5F9;
  color: var(--text-secondary);
  box-shadow: inset 0 0 0 1px var(--border);
}

.calendar-task-time.is-overdue {
  background: var(--danger);
  color: var(--text-on-primary);
  box-shadow: none;
}

.calendar-task-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calendar-task-title {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.calendar-task-sub {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: break-word;
}

.calendar-task-vehicle,
.calendar-task-address {
  display: block;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

.calendar-empty-day {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 10px var(--surface-padding-x);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
}

.calendar-sentinel {
  height: 1px;
}

.calendar-top-btn {
  position: fixed;
  left: 50%;
  bottom: calc(var(--navbar-height) + env(safe-area-inset-bottom) + 14px);
  z-index: 110;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--text-on-primary);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 22px rgba(0, 168, 255, 0.24);
  transform: translateX(-50%);
  cursor: pointer;
}

.calendar-top-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-error {
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  background: var(--bg-card);
  border-radius: var(--surface-radius);
  box-shadow: var(--surface-shadow);
  color: var(--danger);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

@media (max-width: 360px) {
  .calendar-list-day-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .calendar-list-day-count {
    justify-self: end;
  }

}

/* ─── Страница «В разработке» ───────────────────────────────────────────── */
.wip-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--spacing-lg);
  text-align: center;
  gap: var(--spacing-md);
}

.wip-icon {
  width: 80px;
  height: 80px;
  stroke: var(--border);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wip-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-secondary);
}

.wip-sub {
  font-size: 14px;
  color: var(--text-secondary);
  opacity: 0.7;
  max-width: 240px;
}


/* ─── Startup/route recovery ─────────────────────────────────────────────── */
.route-error-actions,
.recovery-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: 100%;
  max-width: 320px;
  margin-top: var(--spacing-sm);
}

.recovery-screen {
  z-index: 9800;
  align-items: stretch;
  overflow-y: auto;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

.recovery-panel {
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 28px var(--spacing-md) calc(28px + env(safe-area-inset-bottom));
}

.recovery-kicker {
  margin-bottom: var(--spacing-sm);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.recovery-panel h1 {
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.12;
}

.recovery-panel p {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.45;
}

.recovery-info {
  margin: 0 0 var(--spacing-md);
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.recovery-info dt {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.recovery-info dd {
  margin: 2px 0 10px;
  overflow-wrap: anywhere;
  color: var(--text-primary);
  font-size: 13px;
}

/* ─── Обязательная проверка связи раз в 48 часов ────────────────────────── */
.offline-access-screen {
  z-index: 9700;
  align-items: stretch;
  overflow-y: auto;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(37, 99, 235, 0.1), transparent 42%),
    var(--bg);
}

.offline-access-panel {
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 28px var(--spacing-md) calc(28px + env(safe-area-inset-bottom));
}

.offline-access-content h1 {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: clamp(26px, 8vw, 32px);
  font-weight: 800;
  line-height: 1.08;
  word-break: normal;
  overflow-wrap: break-word;
}

.offline-access-content > p {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.48;
  word-break: normal;
  overflow-wrap: break-word;
}

.offline-access-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.76);
}

.offline-access-info span {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.offline-access-info strong {
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.35;
  word-break: normal;
  overflow-wrap: break-word;
}

.offline-access-retry {
  min-height: 50px;
}

.offline-access-message {
  min-height: 34px;
  padding: 9px 4px 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  word-break: normal;
  overflow-wrap: break-word;
}

.offline-access-message.is-error {
  color: var(--danger);
}

html.ui-density-compact .offline-access-panel {
  padding: 20px 12px calc(20px + env(safe-area-inset-bottom));
}

html.ui-density-compact .offline-access-content h1 {
  font-size: 26px;
}

@media (max-height: 420px) and (min-width: 600px) {
  .offline-access-panel {
    max-width: 680px;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  }

  .offline-access-content h1,
  html.ui-density-compact .offline-access-content h1 {
    margin-bottom: 7px;
    font-size: 24px;
  }

  .offline-access-content > p {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.35;
  }

  .offline-access-info {
    margin-bottom: 10px;
    padding: 9px 12px;
  }

  .offline-access-retry {
    min-height: 42px;
  }

  .offline-access-message {
    min-height: 24px;
    padding-top: 6px;
    text-align: left;
  }
}

/* ─── Экран обязательных разрешений ─────────────────────────────────────── */
/* PWA install gate */
.install-screen {
  z-index: 9200;
  align-items: stretch;
  overflow-y: auto;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

.install-panel {
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 28px var(--spacing-md) calc(28px + env(safe-area-inset-bottom));
}

.install-kicker {
  margin-bottom: var(--spacing-sm);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.install-panel h1 {
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.12;
}

.install-success {
  margin-bottom: var(--spacing-md);
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--soft-green);
  color: var(--success);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.install-steps {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-lg);
  padding: 0;
  list-style: none;
  counter-reset: install-step;
}

.install-steps li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--spacing-sm);
  align-items: start;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.35;
}

.install-steps li::before {
  counter-increment: install-step;
  content: counter(install-step);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--soft-blue);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
}

.install-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.permission-screen {
  z-index: 9000;
  align-items: stretch;
  overflow-y: auto;
  overscroll-behavior: none;
  overscroll-behavior-y: none;
}

.permission-panel {
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 28px var(--spacing-md);
}

.permission-kicker {
  margin-bottom: var(--spacing-sm);
  color: var(--primary-dark);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.permission-panel h1 {
  margin-bottom: var(--spacing-sm);
  color: var(--text-primary);
  font-size: 26px;
  font-weight: 800;
  line-height: 1.12;
}

.permission-panel p {
  margin-bottom: var(--spacing-lg);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.45;
}

.permission-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.permission-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.permission-item div {
  min-width: 0;
}

.permission-item strong,
.permission-item span {
  display: block;
}

.permission-item strong {
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.25;
}

.permission-item span {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.3;
}

.permission-item em {
  flex-shrink: 0;
  min-width: 96px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.permission-item.is-granted em {
  background: var(--soft-green);
  color: var(--success);
}

.permission-item.is-prompt em {
  background: var(--soft-blue);
  color: var(--primary-dark);
}

.permission-item.is-denied em,
.permission-item.is-error em {
  background: #FEF2F2;
  color: var(--danger);
}

.permission-error {
  margin-bottom: var(--spacing-md);
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #FEF2F2;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.permission-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.permission-logout {
  min-height: 42px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

/* ─── Toast уведомления ─────────────────────────────────────────────────── */
.upload-progress {
  width: min(400px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
  overflow-y: auto;
  font-size: 1rem;
  line-height: 1.4;
  word-break: normal;
  overflow-wrap: normal;
}

.upload-progress::backdrop { background: rgba(0, 0, 0, 0.6); }
.upload-progress:focus { outline: none; }
.upload-progress h2 { font-size: 1.25rem; line-height: 1.3; }
.upload-progress-case { margin-top: 8px; color: var(--text-secondary); }
.upload-progress-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
}
.upload-progress progress {
  appearance: none;
  width: 100%;
  min-width: 0;
  height: 8px;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
  accent-color: var(--primary);
}
.upload-progress progress::-webkit-progress-bar { background: var(--border); }
.upload-progress progress::-webkit-progress-value { background: var(--primary); border-radius: 999px; }
.upload-progress progress::-moz-progress-bar { background: var(--primary); border-radius: 999px; }
.upload-progress-percent { font-variant-numeric: tabular-nums; }
#upload-progress-status { line-height: 1.4; }
.upload-progress-hint { margin-top: 8px; font-size: 0.875rem; line-height: 1.4; color: var(--text-secondary); }
html.ui-density-compact .upload-progress { padding: 16px; }
html.ui-density-compact .upload-progress-track { margin: 16px 0 12px; }
@media (max-height: 420px) {
  .upload-progress { padding: 16px; }
  .upload-progress-track { margin: 16px 0 12px; }
}

.toast-container {
  position: fixed;
  bottom: calc(var(--navbar-height) + 16px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1300;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  width: calc(100% - 32px);
  max-width: 400px;
  pointer-events: none;
}

.toast {
  padding: 12px var(--spacing-md);
  background: var(--text-primary);
  color: white;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  animation: toast-in 0.2s ease-out;
  pointer-events: auto;
}

.toast.success { background: var(--success); }
.toast.error   { background: var(--danger); }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

html.ui-density-compact .appointment-native-fields {
  grid-template-columns: minmax(0, 1fr);
}

html.ui-density-compact .inspection-extra-doc-panel summary {
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
}

html.ui-density-compact .inspection-extra-doc-panel summary::before {
  grid-column: 1;
  grid-row: 1 / span 2;
}

html.ui-density-compact .inspection-extra-doc-panel summary span {
  grid-column: 2 / -1;
  grid-row: 1;
  overflow-wrap: normal;
}

html.ui-density-compact .inspection-extra-doc-panel summary b,
html.ui-density-compact .inspection-extra-doc-panel summary button {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
}

html.ui-density-compact .calendar-list-day-head {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

html.ui-density-compact .calendar-list-day-count {
  min-height: 26px;
  justify-self: end;
  padding: 5px 8px;
  font-size: 11px;
}

html.ui-density-compact .task-filter-shell {
  padding-inline: var(--spacing-md);
}

html.ui-density-compact .task-filters {
  flex-wrap: wrap;
  gap: 3px clamp(3px, 1.25vw, 8px);
}

html.ui-density-compact .task-filter-button {
  min-height: 42px;
  padding-block: 4px;
}

html.ui-density-compact .task-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

html.ui-density-compact .task-card-header .status-badge,
html.ui-density-compact .task-card-date {
  min-width: 0;
  justify-self: start;
  line-height: 1.3;
}

html.ui-density-compact .task-card-statuses,
html.ui-density-compact .case-hero-statuses {
  width: 100%;
  align-items: flex-start;
}

html.ui-density-compact .telegram-inspection-badge {
  white-space: normal;
}

html.ui-density-compact .telegram-inspection-notice {
  grid-template-columns: minmax(0, 1fr);
}

html.ui-density-compact .task-card-date {
  white-space: normal;
}

html.ui-density-compact .task-card-title-row {
  margin-bottom: 8px;
}

html.ui-density-compact .task-card-vehicle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  margin-bottom: 8px;
}

html.ui-density-compact .task-card-vehicle .plate-badge {
  justify-self: start;
}

html.ui-density-compact .task-card-vehicle span:last-child,
html.ui-density-compact .task-meta-row span {
  word-break: normal;
  overflow-wrap: break-word;
}

html.ui-density-compact .task-card-meta {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

html.ui-density-compact .task-meta-row {
  align-items: flex-start;
}

html.ui-density-compact .settings-archive-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 7px;
}

html.ui-density-compact .settings-archive-main {
  width: 100%;
}

html.ui-density-compact .settings-archive-sub {
  word-break: normal;
  overflow-wrap: break-word;
}

html.ui-density-compact .settings-archive-meta {
  width: 100%;
  justify-content: flex-end;
  white-space: normal;
}

html.ui-density-compact .settings-completion-card {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.ui-density-compact .settings-completion-month {
  padding-inline: 4px;
}

html.ui-density-compact .settings-completion-month-label {
  font-size: 10px;
}

html.ui-density-compact .settings-document-progress {
  gap: 8px;
}

html.ui-density-compact .settings-feedback-form-footer {
  align-items: stretch;
  flex-direction: column;
}

html.ui-density-compact .settings-feedback-submit {
  width: 100%;
}

html.ui-density-compact .insurance-company-document {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

html.ui-density-compact .task-document-card {
  grid-template-columns: auto minmax(0, 1fr);
}

html.ui-density-compact .insurance-company-document-view {
  grid-template-columns: minmax(0, 1fr);
}

html.ui-density-compact .insurance-company-document-view b {
  grid-column: 1;
  justify-self: start;
}

html.ui-density-compact .task-document-card b {
  grid-column: 2;
  justify-self: start;
}

html.ui-density-compact #inspection-pinned {
  top: 12px;
  left: 12px;
  width: clamp(66px, 19vmin, 84px);
  max-height: clamp(56px, 16vmin, 72px);
  border-radius: 6px;
}

html.ui-density-compact .inspection-ho-entry {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 12px;
}

html.ui-density-compact .inspection-ho-entry-btn,
html.ui-density-compact .inspection-ho-choice-list > button,
html.ui-density-compact .inspection-ho-wait .btn {
  width: 100%;
  min-width: 0;
}

html.ui-density-compact .inspection-ho-choice,
html.ui-density-compact .inspection-ho-warning,
html.ui-density-compact .inspection-ho-wait,
html.ui-density-compact .inspection-ho-actions {
  padding: 12px;
}

html.ui-density-compact .inspection-ho-choice-list strong,
html.ui-density-compact .inspection-ho-choice-list span {
  overflow-wrap: break-word;
  word-break: normal;
}

html.ui-density-compact #inspection-camera .inspection-camera-controls {
  --inspection-controls-size: 88px;
  gap: 5px;
  padding: 7px;
}

html.ui-density-compact #inspection-camera .inspection-step-info {
  max-width: 80px;
  font-size: 11px;
}

html.ui-density-compact #inspection-camera .inspection-capture-controls {
  height: 56px;
}

html.ui-density-compact #inspection-camera .inspection-capture-btn {
  width: 56px !important;
  height: 56px !important;
  inline-size: 56px !important;
  block-size: 56px !important;
  min-width: 56px;
  min-height: 56px;
  max-width: 56px;
  max-height: 56px;
  flex-basis: 56px;
  border-width: 3px;
}

html.ui-density-compact #inspection-camera .inspection-capture-btn::after {
  width: 42px;
  height: 42px;
}

html.ui-density-compact #inspection-camera .inspection-capture-btn:active::after {
  width: 38px;
  height: 38px;
}

html.ui-density-compact #inspection-camera .inspection-flash-btn {
  left: calc(50% - 68px);
  width: 40px;
  height: 40px;
  inline-size: 40px;
  block-size: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  flex-basis: 40px;
}

html.ui-density-compact #inspection-camera .inspection-flash-btn svg {
  width: 17px;
  height: 17px;
}

html.ui-density-compact #inspection-camera .inspection-additional-done-btn {
  left: calc(50% + 88px);
  min-height: 38px;
  padding: 8px 12px;
  font-size: 11px;
}

@media (orientation: landscape) {
  html.ui-density-compact #inspection-camera .inspection-capture-controls {
    min-height: 120px;
  }

  html.ui-density-compact #inspection-camera .inspection-flash-btn {
    left: 50%;
    top: calc(50% + 64px);
  }
}

/* Lens selection belongs to the shutter panel, outside the viewfinder. */
#inspection-camera .inspection-camera-controls.has-lens-switcher,
#act-camera .inspection-camera-controls.has-lens-switcher {
  --inspection-controls-size: 160px;
}

:is(#inspection-camera, #act-camera) .inspection-camera-controls .inspection-capture-controls.has-lens-switcher {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: center;
  row-gap: 8px;
  height: auto;
  min-height: 0;
}

.inspection-capture-controls.has-lens-switcher .inspection-lens-switcher {
  grid-column: 1 / -1;
  grid-row: 1;
}

:is(#inspection-camera, #act-camera) .inspection-capture-controls.has-lens-switcher > button {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  grid-row: 2;
}

.inspection-capture-controls.has-lens-switcher .inspection-flash-btn {
  grid-column: 1;
}

.inspection-capture-controls.has-lens-switcher .inspection-capture-btn {
  grid-column: 2;
}

.inspection-capture-controls.has-lens-switcher .inspection-additional-done-btn {
  grid-column: 3;
}

html.ui-density-compact #inspection-camera .inspection-camera-controls.has-lens-switcher {
  --inspection-controls-size: 128px;
}

@media (orientation: landscape) {
  #inspection-camera .inspection-camera-controls.has-lens-switcher {
    --inspection-controls-size: 116px;
  }

  #inspection-camera .inspection-camera-controls .inspection-capture-controls.has-lens-switcher {
    flex: 0 1 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    gap: 12px;
  }

  #inspection-camera .inspection-capture-controls.has-lens-switcher > * {
    grid-column: 1;
    grid-row: auto;
  }

  #inspection-camera .inspection-capture-controls.has-lens-switcher .inspection-capture-btn {
    grid-row: 2;
  }

  #inspection-camera .inspection-capture-controls.has-lens-switcher .inspection-flash-btn {
    grid-row: 3;
  }

  #inspection-camera .inspection-capture-controls.has-lens-switcher .inspection-additional-done-btn {
    grid-row: 4;
  }

  html.ui-density-compact #inspection-camera .inspection-camera-controls.has-lens-switcher {
    --inspection-controls-size: 88px;
  }

  html.ui-density-compact #inspection-camera .inspection-camera-controls .inspection-capture-controls.has-lens-switcher {
    gap: 8px;
  }

  html.ui-density-compact #inspection-camera .inspection-lens-switcher {
    gap: 2px;
    padding: 2px;
  }

  html.ui-density-compact #inspection-camera .inspection-lens-btn {
    padding: 7px 4px;
  }
}

@media (max-width: 360px) {
  .contact-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .insurance-company-document {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .task-document-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .insurance-company-document-view {
    grid-template-columns: minmax(0, 1fr);
  }

  .insurance-company-document-view b {
    grid-column: 1;
    justify-self: start;
  }

  .task-document-card b {
    grid-column: 2;
    justify-self: start;
  }

  .contact-call-btn {
    width: 100%;
  }

  .location-map-frame {
    height: 168px;
  }

  .appointment-native-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .inspection-extra-doc-panel summary {
    grid-template-columns: 12px minmax(0, 1fr) auto;
    align-items: center;
  }

  .inspection-extra-doc-panel summary::before {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .inspection-extra-doc-panel summary span {
    grid-column: 2 / -1;
    grid-row: 1;
    overflow-wrap: normal;
  }

  .inspection-extra-doc-panel summary b,
  .inspection-extra-doc-panel summary button {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
  }

  .appointment-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .inspection-ho-entry {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  .inspection-ho-entry-btn,
  .inspection-ho-choice-list > button,
  .inspection-ho-wait .btn {
    width: 100%;
    min-width: 0;
  }

  .inspection-doc-choice {
    grid-template-columns: 1fr;
  }

  .inspection-submit-panel {
    grid-template-columns: 1fr;
  }

  .inspection-submit-btn {
    width: 100%;
  }

  .generated-password {
    grid-template-columns: 1fr;
  }

  .copy-password-btn {
    justify-content: center;
    width: 100%;
  }

  .info-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

@media (max-height: 420px) and (min-width: 600px) {
  html.ui-density-compact .inspection-ho-entry {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  html.ui-density-compact .inspection-ho-entry-btn {
    width: auto;
    min-width: 118px;
  }

  html.ui-density-compact .inspection-ho-choice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ─── Тёмная тема ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .loader-logo,
html[data-theme="dark"] .auth-logo-img,
html[data-theme="dark"] .desktop-only-logo {
  border-radius: 24%;
}

html[data-theme="dark"] .loader-logo,
html[data-theme="dark"] .auth-logo-img {
  margin-bottom: 0;
}

html[data-theme="dark"] .desktop-only-logo {
  margin-bottom: 20px;
}

html[data-theme="dark"] .form-error,
html[data-theme="dark"] .inspection-geo-error,
html[data-theme="dark"] .expert-action-btn.danger,
html[data-theme="dark"] .permission-item.is-denied em,
html[data-theme="dark"] .permission-item.is-error em,
html[data-theme="dark"] .permission-error {
  border-color: #633234;
  background: #2B1718;
  color: #FCA5A5;
}

html[data-theme="dark"] .task-filter-count {
  color: #7F8B99;
}

html[data-theme="dark"] .task-card.is-telegram-inspection:not(.is-overdue) {
  box-shadow: inset 4px 0 0 var(--warning), var(--surface-shadow);
}

html[data-theme="dark"] .task-card.is-telegram-inspection.is-overdue {
  box-shadow: inset 4px 0 0 var(--warning), 0 3px 12px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .offline-banner,
html[data-theme="dark"] .detail-page > .telegram-inspection-notice,
html[data-theme="dark"] .inspection-ho-entry,
html[data-theme="dark"] .inspection-ho-warning,
html[data-theme="dark"] .inspection-guide-note {
  border-color: #5A421A;
  background: #2A1D0F;
  color: #F5C66E;
}

html[data-theme="dark"] .telegram-inspection-badge,
html[data-theme="dark"] .telegram-inspection-notice-icon,
html[data-theme="dark"] .inspection-geo-warning {
  background: #33220F;
  color: #F5B95D;
}

html[data-theme="dark"] .telegram-inspection-notice strong,
html[data-theme="dark"] .telegram-inspection-notice p,
html[data-theme="dark"] .telegram-appointment-note,
html[data-theme="dark"] .inspection-ho-entry h2,
html[data-theme="dark"] .inspection-ho-entry p,
html[data-theme="dark"] .inspection-ho-warning,
html[data-theme="dark"] .inspection-guide-note,
html[data-theme="dark"] .offline-banner {
  color: #F5C66E;
}

html[data-theme="dark"] .status-badge.awaiting_act {
  color: #A5B4FC;
}

html[data-theme="dark"] .status-badge.awaiting_act .status-dot {
  background: #818CF8;
}

html[data-theme="dark"] .status-badge.missed_inspection,
html[data-theme="dark"] .status-badge.new_overdue,
html[data-theme="dark"] .status-badge.task_overdue,
html[data-theme="dark"] .detail-section-icon-red,
html[data-theme="dark"] .archive-photo-access-reason {
  color: #FCA5A5;
}

html[data-theme="dark"] .detail-section-icon,
html[data-theme="dark"] .expert-card-avatar {
  background: var(--soft-blue);
  color: var(--primary);
}

html[data-theme="dark"] .detail-section-icon-green,
html[data-theme="dark"] .case-external-status,
html[data-theme="dark"] .appointment-status,
html[data-theme="dark"] .act-ready,
html[data-theme="dark"] .inspection-complete-panel,
html[data-theme="dark"] .inspection-complete-panel h2,
html[data-theme="dark"] .inspection-geo-ok,
html[data-theme="dark"] .copy-password-btn {
  color: #6EE7B7;
}

html[data-theme="dark"] .detail-section-icon-green {
  background: var(--soft-green);
}

html[data-theme="dark"] .detail-section-icon-orange {
  background: var(--soft-orange);
  color: #F5B95D;
}

html[data-theme="dark"] .detail-section-icon-red {
  background: #2B1718;
}

html[data-theme="dark"] .plate-badge,
html[data-theme="dark"] .location-address-block,
html[data-theme="dark"] .appointment-native-input,
html[data-theme="dark"] .act-preview,
html[data-theme="dark"] .task-documents-empty,
html[data-theme="dark"] .inspection-doc-choice button,
html[data-theme="dark"] .inspection-doc-summary,
html[data-theme="dark"] .inspection-extra-doc-panel,
html[data-theme="dark"] .inspection-block-empty,
html[data-theme="dark"] .inspection-shot,
html[data-theme="dark"] .inspection-additional-photo-card,
html[data-theme="dark"] .inspection-geo-address,
html[data-theme="dark"] .archive-photo-request-input,
html[data-theme="dark"] .inspection-ho-choice-list > button,
html[data-theme="dark"] .inspection-ho-wait.is-locked,
html[data-theme="dark"] .inspection-example-strip img,
html[data-theme="dark"] .calendar-task-row:active {
  border-color: var(--border);
  background: var(--dark-surface-raised);
}

html[data-theme="dark"] .inspection-count,
html[data-theme="dark"] .document-preview-close,
html[data-theme="dark"] .document-preview-zoom,
html[data-theme="dark"] .document-preview-zoom-level,
html[data-theme="dark"] .expert-badge.self,
html[data-theme="dark"] .calendar-list-day-count.is-empty,
html[data-theme="dark"] .calendar-task-time.is-past {
  background: var(--dark-surface-muted);
  color: var(--text-secondary);
}

html[data-theme="dark"] .appointment-native-input:focus,
html[data-theme="dark"] .act-preview-head button,
html[data-theme="dark"] .act-photo-strip span,
html[data-theme="dark"] .act-photo-strip button,
html[data-theme="dark"] .inspection-extra-doc-control select,
html[data-theme="dark"] .inspection-extra-doc-panel summary button,
html[data-theme="dark"] .inspection-field input,
html[data-theme="dark"] .inspection-shot-preview,
html[data-theme="dark"] .inspection-additional-photo-strip button,
html[data-theme="dark"] .inspection-geo-reason-form textarea,
html[data-theme="dark"] #inspection-pinned,
html[data-theme="dark"] .copy-password-btn {
  border-color: var(--border);
  background: var(--bg-card);
}

html[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, var(--border) 25%, #3A4655 50%, var(--border) 75%);
}

html[data-theme="dark"] .location-map-unavailable-state {
  background: var(--dark-surface-raised);
}

html[data-theme="dark"] .appointment-picker-invalid .appointment-native-input {
  background: #2B1718;
}

html[data-theme="dark"] .task-document-card:active,
html[data-theme="dark"] .expert-action-btn {
  background: #102838;
  color: #7CC8FF;
}

html[data-theme="dark"] .document-preview-panel,
html[data-theme="dark"] .document-preview-content {
  background: #090D12;
}

html[data-theme="dark"] .document-preview-header {
  background: var(--bg-card);
}

html[data-theme="dark"] .document-preview-loading span {
  border-color: var(--border);
  border-top-color: var(--primary);
}

html[data-theme="dark"] .inspection-extra-doc-panel.is-selected {
  border-color: #24577A;
  background: #102838;
}

html[data-theme="dark"] .inspection-extra-doc-panel.is-complete,
html[data-theme="dark"] .inspection-shot.filled {
  border-color: #285341;
  background: #10261E;
}

html[data-theme="dark"] .inspection-ho-wait {
  border-color: #24577A;
  background: #102838;
  color: #A7D8FF;
}

html[data-theme="dark"] .inspection-ho-wait.is-ready,
html[data-theme="dark"] .inspection-ho-wait.is-complete,
html[data-theme="dark"] .generated-password {
  border-color: #285341;
  background: #10261E;
  color: #86E7BE;
}

html[data-theme="dark"] .generated-password code {
  color: #86E7BE;
}

html[data-theme="dark"] .expert-badge.admin {
  background: #102838;
  color: #7CC8FF;
}

html[data-theme="dark"] .expert-badge.self {
  color: var(--text-secondary);
}

html[data-theme="dark"] .btn:not(.btn-primary) {
  background: var(--dark-surface-raised);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--dark-border-strong);
}

html[data-theme="dark"] .btn:not(.btn-primary):active {
  background: var(--dark-surface-muted);
}

html[data-theme="dark"] .inspection-submit-panel {
  border-color: var(--dark-border-strong);
  background: rgba(22, 27, 34, 0.98);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}

html[data-theme="dark"] .location-map-recenter {
  border-color: var(--dark-border-strong);
  background: rgba(31, 38, 48, 0.96);
  color: var(--primary-light);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .toast {
  border: 1px solid var(--dark-border-strong);
  background: var(--dark-surface-raised);
  color: var(--text-primary);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.46);
}

html[data-theme="dark"] .toast.success {
  border-color: #278A69;
  background: #145E49;
  color: #F2FFF9;
}

html[data-theme="dark"] .toast.error {
  border-color: #F05B66;
  background: #9F2631;
  color: #FFF7F8;
}

html[data-theme="dark"] .task-card.is-overdue {
  border: 1px solid rgba(255, 90, 102, 0.42);
  background: var(--bg-card);
  box-shadow: 0 0 14px rgba(255, 90, 102, 0.28);
}

html[data-theme="dark"] .task-card.is-telegram-inspection.is-overdue {
  box-shadow: inset 4px 0 0 var(--warning), 0 0 14px rgba(255, 90, 102, 0.28);
}