/* Слой дизайна поверх style.css (редизайн без смены функций).
   Одно семейство холодных серых, один акцент, тонированные тени, шкала z-index,
   табличные цифры, состояния нажатия и фокуса. Работает офлайн: только системные шрифты. */
:root {
  --bg: #0b0f14; --panel: #121821; --panel2: #19212c; --line: #253041; --line-strong: #33415a;
  --surface-hover: #1f2935; --track: #1d2633;
  --text: #e7ecf3; --dim: #8b97a8; --accent: #4c9aff; --accent-strong: #3a86ec;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --shadow: 0 10px 28px rgba(3, 8, 18, 0.55), 0 2px 6px rgba(3, 8, 18, 0.35);
  --glass: rgba(18, 24, 33, 0.82);
  --r-sm: 5px; --r-md: 8px; --r-lg: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --z-float: 5; --z-panel: 30; --z-tip: 40; --z-drop: 50; --z-toast: 60; --z-modal: 70;
}
html, body { font-family: var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
p, .summary, .stsay, .empty p { text-wrap: pretty; }
::selection { background: rgba(76, 154, 255, 0.35); }

/* шапка: вес бренда, тонкая тень вместо жёсткой линии */
.top { box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(3, 8, 18, 0.35); border-bottom: 0; position: relative; z-index: 2; }
.brand { font-family: var(--display); font-weight: 650; letter-spacing: -0.01em; }
.brand .logo { display: inline-block; transform: translateY(-1px); }

/* кнопки, списки, поля: плавные переходы, нажатие, видимый фокус с клавиатуры */
button, .btn, select, input[type=number], input[type=search] {
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease),
    transform 90ms var(--ease), box-shadow 160ms var(--ease);
}
button:hover:not(:disabled), .btn:hover { border-color: var(--line-strong); background: var(--surface-hover); }
button:active:not(:disabled), .btn:active { transform: translateY(1px); }
button.active, button.active:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover:not(:disabled), .controls .play:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button.active, button.primary, .controls .play { font-weight: 600; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
select:hover, input[type=number]:hover, input[type=search]:hover { border-color: var(--line-strong); }
code, kbd { background: var(--track); }
kbd { border: 1px solid var(--line-strong); border-bottom-width: 2px; }

/* чипы: плашки вместо «пилюль», важные — полужирные */
.chip { border-radius: var(--r-sm); font-weight: 500; }
.chip.ok, .chip.bad, .chip.warn { font-weight: 600; }

/* плавающие панели карты и сюжета: стекло с тонкой светлой кромкой и тонированной тенью */
.maptools, .legend, .storybar {
  background: var(--glass); -webkit-backdrop-filter: blur(8px) saturate(120%); backdrop-filter: blur(8px) saturate(120%);
  border-color: rgba(120, 140, 170, 0.22); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.maptools label { transition: color 160ms var(--ease); }
.maptools label:hover { color: #fff; }
.storybar { border-color: rgba(76, 154, 255, 0.55); border-radius: var(--r-lg); z-index: var(--z-float); }
.storybar .sttitle { font-family: var(--display); font-weight: 650; letter-spacing: -0.01em; }

/* боковая панель: иерархия весов, индикатор активной вкладки */
.status .row.big .val { font-family: var(--display); font-weight: 650; letter-spacing: -0.01em; }
.status .grid .val { font-weight: 500; }
.tabbar button { font-weight: 500; color: var(--dim); }
.tabbar button:hover:not(.active):not(:disabled) { color: var(--text); background: transparent; border-color: transparent; }
.tabbar button.active, .tabbar button.active:hover:not(:disabled) { color: var(--text); background: var(--panel2); border-color: var(--line); box-shadow: inset 0 -2px 0 var(--accent); }
.summary { font-weight: 500; }
.scorebig { font-family: var(--display); letter-spacing: -0.02em; }

/* таблицы: единые серые, плавная подсветка строк, метка текущей строки */
.tbl th { font-weight: 600; letter-spacing: 0.01em; }
.tbl td, table.kv td { border-bottom-color: rgba(37, 48, 65, 0.6); transition: background-color 160ms var(--ease); }
.tbl tr.click:hover td { background: var(--surface-hover); }
.tbl tr.now td { background: rgba(76, 154, 255, 0.14); }
.tbl tr.now td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
.bar .bt, .progress { background: var(--track); }

/* низ: таймлайн и графики как единая «приборная» зона */
.bottom { box-shadow: 0 -1px 0 var(--line), 0 -6px 18px rgba(3, 8, 18, 0.3); border-top: 0; position: relative; }
.clock { font-weight: 600; }

/* всплывающие элементы: общая шкала слоёв и тень */
.summary-panel { z-index: var(--z-panel); }
.tltip { z-index: var(--z-tip); box-shadow: var(--shadow); }
.dropzone { z-index: var(--z-drop); }
.toast { z-index: var(--z-toast); box-shadow: var(--shadow); }
.modal { z-index: var(--z-modal); background: rgba(5, 8, 13, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal .card { border-radius: var(--r-lg); box-shadow: var(--shadow); }

/* загрузка прогона: тонкая бегущая полоса вверху вместо паузы без обратной связи */
body::after {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: var(--z-toast); pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%) no-repeat;
  background-size: 40% 100%; opacity: 0; transition: opacity 200ms var(--ease);
}
body.loading::after { opacity: 1; animation: loadbar 1.1s linear infinite; }
@keyframes loadbar { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* тонкие тёмные полосы прокрутки */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* пакетный запуск: форма в окне «Новый прогон» и вкладка «Пакет» */
.batchform { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; background: var(--panel2); }
.batchform > summary { cursor: pointer; }
.bfgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
.bfscen { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.bfgroup { margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.batchform label.chk { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.bfright { display: flex; flex-direction: column; gap: 6px; }
.bfright input[type=search] { width: 100%; }
.bfbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.bhead { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.bhead select { flex: 1; min-width: 0; }
.bscore { display: flex; gap: 18px; margin: 8px 0; }
.bcs { font-family: var(--display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }

/* задание оператора (#166): маршрут из точек карты и условия */
.taskform .tkroute { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.taskform .tkroute .arr { color: var(--dim); }
.taskform .tkcond { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; font-size: 12px; }
.taskform .tkcond label:not(.chk), .taskform .tkrow label { display: flex; gap: 6px; align-items: center; color: var(--dim); font-size: 12px; }
.taskform .tkrow { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 10px; }
.taskform .tkrow input[type=number] { width: 70px; }
.taskform select, .taskform input[type=number] { color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 6px; }
.taskform .tkplan { margin-top: 10px; color: var(--dim); line-height: 1.5; min-height: 1.5em; }
.taskform .tkplan b { color: var(--text); font-weight: 600; }
#tkMsg:empty { display: none; }

.chip.dimchip { color: var(--dim); border-style: dashed; }

/* журнал решений и груз (#177) */
.sw.cargo { border: 2px dashed #a3e635; border-radius: 50%; background: none; }
.tbl .jk { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 4px; }