/* ══ ШАБЛОНЫ — масштаб по высоте экрана (--u = min(1vw,1.6vh)) ══ */

#page-templates { display: grid; grid-template-columns: clamp(306px, 26.8vw, 663px) 1fr; height: 100%; width: 100%; }

/* ── Сайдбар со списком ── */
.tm-side { background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: clamp(8px, calc(0.63 * var(--u)), 18px); overflow-y: auto; gap: clamp(5px, calc(0.42 * var(--u)), 12px); scrollbar-width: auto; }
.tm-side::-webkit-scrollbar { width: clamp(12px, calc(1.04 * var(--u)), 30px); }
.tm-side::-webkit-scrollbar-track { background: var(--bg3); }
.tm-side::-webkit-scrollbar-thumb { background: var(--border2); border-radius: clamp(2px, calc(0.2 * var(--u)), 5px); }
.tm-side::-webkit-scrollbar-thumb:hover { background: var(--text3); }

.tm-list-item { padding: clamp(9px, calc(0.73 * var(--u)), 22px); border-radius: var(--r2); border: 1px solid var(--border); background: var(--bg3); cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; gap: clamp(4px, calc(0.31 * var(--u)), 10px); }
.tm-list-item:hover { border-color: var(--accent); }
.tm-list-item.active { border-color: var(--accent); background: var(--accent-l); }
.tm-list-item.is-on { background: rgba(13,168,106,0.22); border-color: var(--green); }
.tm-list-item.is-on:hover { filter: brightness(0.96); }
.tm-list-item.is-on.active { background: rgba(13,168,106,0.28); border-color: var(--green); outline: 2px solid var(--accent); outline-offset: -1px; }
.tm-list-item.is-running { background: rgba(30,80,220,0.22); border-color: var(--accent); }
.tm-list-item.is-running:hover { filter: brightness(0.97); }
.tm-list-item.is-running.active { background: rgba(30,80,220,0.28); outline: 2px solid var(--accent); outline-offset: -1px; }
.tm-list-item.is-queued { background: rgba(200,120,20,0.20); border-color: var(--orange); }
.tm-list-item.is-queued:hover { filter: brightness(0.97); }
.tm-list-item.is-queued.active { background: rgba(200,120,20,0.26); outline: 2px solid var(--orange); outline-offset: -1px; }

.tl-separator { height: clamp(6px, calc(0.52 * var(--u)), 16px); margin: clamp(2px, calc(0.16 * var(--u)), 5px) 0; border-top: 1px solid var(--border2); }

.tl-head { display: flex; align-items: center; gap: clamp(5px, calc(0.42 * var(--u)), 12px); }
.tl-head b { font-size: clamp(13px, calc(0.99 * var(--u)), 30px); color: var(--text); flex: 1; }
.tl-time { font-family: var(--mono); font-size: clamp(11px, calc(0.89 * var(--u)), 27px); font-weight: 700; color: var(--accent); white-space: nowrap; }
.tl-runtime { font-family: var(--mono); font-size: clamp(10px, calc(0.83 * var(--u)), 25px); font-weight: 700; color: var(--green); white-space: nowrap; margin-left: auto; }
.tl-runtime-manual { color: var(--accent); }
.tl-badge { font-size: clamp(8px, calc(0.63 * var(--u)), 18px); font-weight: 800; border-radius: clamp(3px, calc(0.26 * var(--u)), 8px); padding: clamp(1px, calc(0.1 * var(--u)), 3px) clamp(4px, calc(0.36 * var(--u)), 10px); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.tl-badge-manual { color: var(--accent); background: rgba(30,80,200,0.15); border: 1px solid var(--accent); }
.tl-badge-queue  { color: var(--orange); background: rgba(200,120,20,0.15); border: 1px solid var(--orange); }
.tl-stage-chip { display: inline-flex; align-items: center; gap: clamp(3px, calc(0.26 * var(--u)), 8px); }
.tl-dot { width: clamp(8px, calc(0.63 * var(--u)), 18px); height: clamp(8px, calc(0.63 * var(--u)), 18px); border-radius: 50%; flex-shrink: 0; }
.tl-dot.on      { background: var(--border2); }
.tl-dot.off     { background: var(--border2); }
.tl-dot.cfg     { background: var(--border2); }
.tl-dot.running { background: var(--accent); box-shadow: 0 0 clamp(4px, calc(0.36 * var(--u)), 10px) var(--accent); animation: dot-pulse 1.2s ease-in-out infinite; }
.tl-dot.queued  { background: var(--orange); box-shadow: 0 0 clamp(4px, calc(0.36 * var(--u)), 10px) var(--orange); }
@keyframes dot-pulse { 0%,100% { opacity:1; } 50% { opacity:0.35; } }

.tl-row { display: flex; align-items: center; gap: clamp(5px, calc(0.42 * var(--u)), 12px); flex-wrap: wrap; }
.tl-key { font-size: clamp(9px, calc(0.73 * var(--u)), 22px); font-weight: 700; text-transform: uppercase; color: var(--text3); letter-spacing: 0.04em; }
.tl-val { font-family: var(--mono); font-size: clamp(10px, calc(0.83 * var(--u)), 25px); font-weight: 700; color: var(--text2); }
.tl-off { font-size: clamp(10px, calc(0.83 * var(--u)), 25px); color: var(--text3); padding-left: clamp(13px, calc(1.04 * var(--u)), 32px); }
.tl-sep { color: var(--border2); font-size: clamp(9px, calc(0.73 * var(--u)), 22px); }
.tl-valve { display: inline-flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: clamp(9px, calc(0.73 * var(--u)), 22px); font-weight: 700; color: var(--text2); background: var(--bg2); border: 1px solid var(--border2); border-radius: clamp(2px, calc(0.16 * var(--u)), 5px); min-width: clamp(16px, calc(1.3 * var(--u)), 38px); height: clamp(16px, calc(1.3 * var(--u)), 38px); padding: 0 clamp(2px, calc(0.16 * var(--u)), 5px); }

.tl-icons { display: flex; gap: clamp(3px, calc(0.26 * var(--u)), 8px); margin-left: auto; }
.tl-ibtn { width: clamp(20px, calc(1.56 * var(--u)), 46px); height: clamp(20px, calc(1.56 * var(--u)), 46px); border-radius: clamp(4px, calc(0.36 * var(--u)), 10px); border: 1px solid var(--border2); background: var(--bg2); color: var(--text3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.15s; }
.tl-ibtn svg { width: clamp(11px, calc(0.83 * var(--u)), 25px); height: clamp(11px, calc(0.83 * var(--u)), 25px); }
.tl-ibtn:hover { border-color: var(--accent); color: var(--accent); }
.tl-ibtn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tl-ibtn-start { border-color: var(--green); color: var(--green); background: var(--green-l); }
.tl-ibtn-start:hover { background: var(--green); color: #fff; }
.tl-ibtn-stop { border-color: var(--red); color: var(--red); background: var(--red-l); }
.tl-ibtn-stop:hover { background: var(--red); color: #fff; }

/* ── Правая часть ── */
.tm-main { height: 100%; overflow: hidden; display: flex; flex-direction: column; }

/* ── Тёмная панель управления ── */
.tm-hbar {
  background: #4a5060;
  padding: 0 clamp(16px, calc(1.25 * var(--u)), 38px);
  height: clamp(56px, calc(4.58 * var(--u)), 140px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: clamp(12px, calc(1.04 * var(--u)), 32px);
  transition: background 0.3s;
}
.tm-hbar.is-on      { background: #0d2e1e; }
.tm-hbar.is-running { background: #0d1e3e; }
.tm-hbar.is-queued  { background: #2e1e00; }

.tm-main-on      .tm-editor-scroll { background: #d6f5e6; }
.tm-main-running .tm-editor-scroll { background: #d8e2ff; }
.tm-main-queued  .tm-editor-scroll { background: #fdecc8; }

.tm-hbar-left { display: flex; align-items: center; gap: clamp(12px, calc(1.04 * var(--u)), 32px); }
.tm-hbar-right { display: flex; align-items: center; gap: clamp(8px, calc(0.63 * var(--u)), 18px); }

.tm-hbar-name { font-size: clamp(14px, calc(1.15 * var(--u)), 35px); font-weight: 800; color: #fff; white-space: nowrap; }

.tm-hbar-vsep { width: 1px; height: clamp(26px, calc(2.08 * var(--u)), 64px); background: rgba(255,255,255,0.15); flex-shrink: 0; }

.tm-hbar-time-block { display: flex; flex-direction: column; align-items: center; gap: clamp(1px, calc(0.16 * var(--u)), 5px); }
.tm-hbar-label { font-size: clamp(8px, calc(0.68 * var(--u)), 20px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.4); }
.tm-hbar-time-block > span:last-child { font-family: var(--mono); font-size: clamp(18px, calc(1.46 * var(--u)), 44px); font-weight: 700; color: rgba(255,255,255,0.9); letter-spacing: 0.05em; }

.tm-hbar-time-ctrl { display: flex; align-items: center; gap: clamp(3px, calc(0.26 * var(--u)), 8px); }
.tc-time-val { font-family: var(--mono); font-size: clamp(18px, calc(1.46 * var(--u)), 44px); font-weight: 700; color: #fff; letter-spacing: 0.05em; min-width: clamp(52px, calc(4.06 * var(--u)), 124px); text-align: center; cursor: pointer; border-radius: clamp(4px, calc(0.36 * var(--u)), 10px); padding: clamp(2px, calc(0.16 * var(--u)), 5px) clamp(4px, calc(0.36 * var(--u)), 10px); transition: background 0.15s; }
.tc-time-val:hover { background: rgba(255,255,255,0.12); }
.tc-btn { height: clamp(25px, calc(1.98 * var(--u)), 60px); padding: 0 clamp(6px, calc(0.52 * var(--u)), 16px); border-radius: clamp(5px, calc(0.42 * var(--u)), 12px); border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); font-weight: 700; font-size: clamp(10px, calc(0.83 * var(--u)), 25px); transition: 0.15s; white-space: nowrap; }
.tc-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* ── Time Picker Modal ── */
#tp-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1000; display: none; align-items: center; justify-content: center; }
#tp-modal { background: #2a3244; border-radius: clamp(12px, calc(1.04 * var(--u)), 32px); padding: clamp(20px, calc(1.67 * var(--u)), 50px); display: flex; flex-direction: column; align-items: center; gap: clamp(16px, calc(1.35 * var(--u)), 42px); min-width: clamp(240px, calc(20 * var(--u)), 600px); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.tp-label { font-size: clamp(11px, calc(0.83 * var(--u)), 25px); font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; }
.tp-wheels { display: flex; align-items: center; gap: clamp(10px, calc(0.83 * var(--u)), 25px); }
.tp-sep { font-family: var(--mono); font-size: clamp(32px, calc(2.6 * var(--u)), 80px); font-weight: 700; color: rgba(255,255,255,0.5); line-height: 1; }
.tp-col { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, calc(0.52 * var(--u)), 16px); }
.tp-col span { font-family: var(--mono); font-size: clamp(48px, calc(3.85 * var(--u)), 120px); font-weight: 700; color: #fff; line-height: 1; min-width: clamp(60px, calc(5 * var(--u)), 150px); text-align: center; }
.tp-arrow { width: clamp(44px, calc(3.54 * var(--u)), 110px); height: clamp(44px, calc(3.54 * var(--u)), 110px); border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.8); font-size: clamp(20px, calc(1.56 * var(--u)), 48px); display: flex; align-items: center; justify-content: center; transition: 0.15s; }
.tp-arrow:hover { background: rgba(255,255,255,0.2); color: #fff; }
.tp-foot { display: flex; gap: clamp(10px, calc(0.83 * var(--u)), 25px); width: 100%; }
.tp-cancel { flex: 1; height: clamp(40px, calc(3.13 * var(--u)), 96px); border-radius: clamp(8px, calc(0.63 * var(--u)), 18px); border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.6); font-weight: 700; font-size: clamp(13px, calc(1.04 * var(--u)), 32px); }
.tp-ok { flex: 2; height: clamp(40px, calc(3.13 * var(--u)), 96px); border-radius: clamp(8px, calc(0.63 * var(--u)), 18px); border: none; background: var(--accent); color: #fff; font-weight: 800; font-size: clamp(13px, calc(1.04 * var(--u)), 32px); }

/* ── Кнопки в hbar ── */
.hbar-btn { height: clamp(36px, calc(2.81 * var(--u)), 86px); padding: 0 clamp(14px, calc(1.15 * var(--u)), 35px); border-radius: clamp(8px, calc(0.63 * var(--u)), 18px); border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7); font-weight: 800; font-size: clamp(14px, calc(1.15 * var(--u)), 35px); display: flex; align-items: center; gap: clamp(6px, calc(0.52 * var(--u)), 16px); transition: 0.15s; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.04em; }
.hbar-btn svg { width: clamp(13px, calc(1.04 * var(--u)), 32px); height: clamp(13px, calc(1.04 * var(--u)), 32px); flex-shrink: 0; }
.hbar-icon { width: clamp(36px, calc(2.81 * var(--u)), 86px); padding: 0; justify-content: center; }
.hbar-icon svg { width: clamp(16px, calc(1.25 * var(--u)), 38px); height: clamp(16px, calc(1.25 * var(--u)), 38px); }
.hbar-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.hbar-repeat.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.hbar-repeat.active:hover { background: #1a7aff; }
.hbar-start { background: var(--green); border-color: var(--green); color: #fff; padding: 0 clamp(20px, calc(1.67 * var(--u)), 50px); }
.hbar-start:hover { background: #0fc07a; }
.hbar-stop { background: var(--red); border-color: var(--red); color: #fff; padding: 0 clamp(20px, calc(1.67 * var(--u)), 50px); }
.hbar-stop:hover { background: #f03535; }

/* ── Вспомогательные кнопки ── */
.btn-sm { padding: clamp(5px, calc(0.42 * var(--u)), 12px) clamp(9px, calc(0.73 * var(--u)), 22px); font-size: clamp(7px, calc(0.57 * var(--u)), 17px); border-radius: clamp(5px, calc(0.42 * var(--u)), 12px); border: 1px solid var(--border2); background: var(--bg2); color: var(--text2); font-weight: 700; display: flex; align-items: center; gap: clamp(3px, calc(0.26 * var(--u)), 8px); text-transform: uppercase; }
.btn-sm svg { width: clamp(9px, calc(0.68 * var(--u)), 20px); height: clamp(9px, calc(0.68 * var(--u)), 20px); }
.btn-sm:hover { background: var(--bg3); }
.btn-reset { width: clamp(30px, calc(2.29 * var(--u)), 70px); height: clamp(30px, calc(2.29 * var(--u)), 70px); padding: 0; justify-content: center; border-color: var(--orange); color: var(--orange); background: rgba(224,120,32,0.12); border-width: 2px; }
.btn-reset svg { width: clamp(17px, calc(1.35 * var(--u)), 42px); height: clamp(17px, calc(1.35 * var(--u)), 42px); }
.btn-reset:hover { background: var(--orange); color: #fff; }
.btn-reset-lg { width: clamp(34px, calc(2.71 * var(--u)), 84px); height: clamp(34px, calc(2.71 * var(--u)), 84px); }
.btn-reset-lg svg { width: clamp(21px, calc(1.67 * var(--u)), 52px); height: clamp(21px, calc(1.67 * var(--u)), 52px); }

/* ── Заголовок колонки меток ── */
.tm-label-head { display: flex; align-items: center; height: clamp(40px, calc(3.02 * var(--u)), 90px); }

/* ── Кнопки клапанов ── */
.valves-title { font-size: clamp(14px, calc(1.15 * var(--u)), 35px); font-weight: 800; color: var(--text2); text-transform: uppercase; letter-spacing: 0; }
.btn-valve { padding: clamp(6px, calc(0.52 * var(--u)), 16px) clamp(12px, calc(0.94 * var(--u)), 28px); font-size: clamp(14px, calc(1.15 * var(--u)), 35px); font-weight: 800; border-radius: clamp(6px, calc(0.52 * var(--u)), 16px); border: 2px solid; display: flex; align-items: center; gap: clamp(5px, calc(0.36 * var(--u)), 11px); text-transform: uppercase; letter-spacing: 0; transition: 0.15s; }
.btn-valve svg { width: clamp(12px, calc(0.94 * var(--u)), 28px); height: clamp(12px, calc(0.94 * var(--u)), 28px); flex-shrink: 0; }
.btn-valve-all { border-color: var(--green); color: var(--green); background: rgba(13,168,106,0.1); }
.btn-valve-all:hover { background: var(--green); color: #fff; }
.btn-valve-clear { border-color: var(--orange); color: var(--orange); background: rgba(224,120,32,0.1); }
.btn-valve-clear:hover { background: var(--orange); color: #fff; }

/* ── Скролл / содержимое — светлый фон ── */
.tm-editor-scroll { flex: 1; overflow-y: auto; padding: clamp(8px, calc(0.63 * var(--u)), 20px); background: #fff; }
.tm-card-full { display: flex; flex-direction: column; gap: clamp(8px, calc(0.63 * var(--u)), 20px); }

/* ── Сетка этапов ── */
.tm-grid { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: clamp(7px, calc(0.52 * var(--u)), 16px); }
.tm-label-col { display: flex; flex-direction: column; gap: clamp(7px, calc(0.52 * var(--u)), 16px); }
.tm-row-label { height: clamp(32px, calc(2.5 * var(--u)), 77px); display: flex; align-items: center; font-weight: 700; font-size: clamp(14px, calc(1.15 * var(--u)), 35px); color: var(--text2); text-transform: uppercase; letter-spacing: 0; white-space: nowrap; }

.tm-stage { background: var(--bg); border-radius: clamp(8px, calc(0.63 * var(--u)), 18px); padding: clamp(8px, calc(0.63 * var(--u)), 18px) clamp(7px, calc(0.52 * var(--u)), 16px); display: flex; flex-direction: column; gap: clamp(7px, calc(0.52 * var(--u)), 16px); border: 1px solid var(--border); min-width: 0; }
.tm-stage-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--text); font-size: clamp(14px, calc(1.15 * var(--u)), 35px); margin-bottom: 0; }

/* ── Степпер ── */
.stepper { display: flex; align-items: center; background: var(--bg2); border-radius: clamp(6px, calc(0.52 * var(--u)), 16px); border: 2px solid var(--border2); height: clamp(32px, calc(2.5 * var(--u)), 77px); overflow: hidden; transition: background 0.15s, border-color 0.15s; }
.stepper button { flex: 0 0 30%; max-width: clamp(60px, calc(4.69 * var(--u)), 144px); height: 100%; border: none; background: #1a2232; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); transition: 0.15s; }
.stepper button svg { width: clamp(18px, calc(1.46 * var(--u)), 44px); height: clamp(18px, calc(1.46 * var(--u)), 44px); stroke-width: 2.5; }
.stepper button:hover { background: #2d3d57; color: #fff; }
.stepper input { flex: 1; border: none; text-align: center; font-family: var(--mono); font-weight: 700; font-size: clamp(17px, calc(1.35 * var(--u)), 42px); color: var(--text3); outline: none; min-width: 0; background: transparent; transition: color 0.15s; }
.stepper input.active-val { color: var(--accent); }

/* Весь степпер горит акцентом если значение > 0 */
.stepper:has(input.active-val) { background: var(--accent); border-color: var(--accent); }
.stepper:has(input.active-val) button { background: rgba(0,0,0,0.25); color: #fff; }
.stepper:has(input.active-val) button:hover { background: rgba(0,0,0,0.38); }
.stepper:has(input.active-val) input { color: #fff; }

/* ── Клапаны ── */
.valves-box { padding-top: clamp(8px, calc(0.63 * var(--u)), 20px); border-top: 1px solid var(--bg3); }
.valves-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(10px, calc(0.73 * var(--u)), 22px); }
.valves-grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: clamp(5px, calc(0.42 * var(--u)), 12px); }
.v-btn { height: clamp(52px, calc(4.17 * var(--u)), 128px); border: 2px solid var(--border2); border-radius: clamp(6px, calc(0.52 * var(--u)), 16px); background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text3); cursor: pointer; transition: 0.15s; }
.v-btn span { font-family: var(--mono); font-size: clamp(14px, calc(1.15 * var(--u)), 35px); font-weight: 900; line-height: 1; }
.v-btn:hover { border-color: var(--accent); color: var(--accent); }
.v-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }