/* engine.css v0.2.1 — 30.08.2026 — три колонки, отступ под крестик, компактные чипы и поля, всё без прокрутки */
/* v0.2.0 — 30.08.2026 — первый выпуск: пульт движка (состояние, карточки, GPU-кольцо, модели, параметры, журнал) */

.engine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-right: 40px; }
.engine-title { display: flex; align-items: center; gap: 12px; }
.engine-title h2 { margin: 0; }
.engine-state {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); background: var(--surface-2);
}
.engine-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.engine-state.run { color: var(--good); border-color: #bbf7d0; background: #f0fdf4; }
.engine-state.run::before { background: var(--good); box-shadow: 0 0 0 3px rgba(21, 128, 61, .15); }
.engine-state.starting { color: var(--warn); border-color: #fde68a; background: #fffbeb; }
.engine-state.starting::before { background: var(--warn); animation: pulse 1s ease-in-out infinite; }
.engine-state.stopped, .engine-state.failed { color: var(--bad); border-color: #fecaca; background: #fef2f2; }
.engine-state.stopped::before, .engine-state.failed::before { background: var(--bad); }
@keyframes pulse { 50% { opacity: .25; } }
.engine-actions { display: flex; gap: 6px; }
.engine-actions button:disabled { opacity: .45; cursor: default; }

.engine-grid {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 0.85fr;
  grid-template-rows: auto auto minmax(100px, 1fr);
  gap: 10px;
}
.engine-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  padding: 10px 12px; min-height: 0; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.engine-card-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 6px; }
#engLoaded { grid-column: 1 / 3; }
#engGpu { grid-column: 3; }
.engine-models { grid-column: 1; }
.engine-params { grid-column: 2 / 4; }
.engine-log { grid-column: 1 / -1; }

/* загружено */
.engine-loaded-name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.engine-loaded-path { font-family: var(--mono); font-size: 11.5px; color: var(--text-3); margin: 1px 0 6px; overflow-wrap: anywhere; }
.engine-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.engine-chips .chip { font-size: 11px; padding: 3px 9px; }
.engine-chips .chip b { color: var(--text); }

/* GPU */
.engine-gpu { display: flex; align-items: center; gap: 12px; }
.gauge { width: 76px; height: 76px; flex: 0 0 76px; }
.gauge circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.gauge .track { stroke: var(--line); }
.gauge .fill { stroke: var(--accent-2); transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dasharray .4s; }
.gauge .fill.hot { stroke: var(--bad); }
.gauge text { font: 700 15px var(--font); fill: var(--text); }
.engine-gpu-info { display: grid; grid-template-columns: auto auto; gap: 2px 10px; font-size: 12px; color: var(--text-2); }
.engine-gpu-info b { color: var(--text); font-weight: 600; }
.engine-gpu-name { grid-column: 1 / -1; font-weight: 700; color: var(--text); margin-bottom: 2px; font-size: 12.5px; }

/* модели */
.engine-model-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; max-height: 150px; }
.engine-model {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface-2);
}
.engine-model.active { border-color: #bae6fd; background: var(--accent-soft); }
.engine-model .m-name { font-weight: 700; font-size: 13.5px; }
.engine-model .m-meta { grid-column: 1; font-size: 11.5px; color: var(--text-3); }
.engine-model .m-side { grid-row: 1 / span 2; display: flex; align-items: center; gap: 6px; }
.engine-model .m-side .chip.good { font-size: 11px; }

/* параметры — форма в две колонки */
.engine-params { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; align-content: start; }
.engine-params .engine-card-title { grid-column: 1 / -1; }
.engine-params .field { gap: 3px; font-size: 12px; }
.engine-params .field small { font-weight: 400; color: var(--text-3); }
.engine-params .field input, .engine-params .field select { padding: 6px 9px; font-size: 13px; }
.engine-params-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.engine-params input[type="range"] { padding: 0; height: 30px; accent-color: var(--accent-2); border: 0; }
.engine-params .form-row { grid-column: 1 / -1; margin-top: 2px; }

/* журнал */
.engine-log pre {
  flex: 1; min-height: 90px; margin: 0; overflow: auto;
  background: #0b1220; color: #cbd5e1;
  border-radius: var(--radius-s); padding: 9px 12px;
  font: 11.5px/1.45 var(--mono); white-space: pre; tab-size: 4;
}
.engine-log pre .l-err { color: #fca5a5; }
.engine-log pre .l-warn { color: #fcd34d; }
.engine-log pre .l-ok { color: #86efac; }

@media (max-width: 760px) {
  .engine-grid { grid-template-columns: 1fr; grid-template-rows: none; }
  #engLoaded, #engGpu, .engine-models, .engine-params, .engine-log { grid-column: 1; }
  .engine-params { grid-template-columns: 1fr; }
  .engine-head { flex-direction: column; align-items: flex-start; padding-right: 0; }
}