body {
  font-size: .875rem;
  cursor: default;
  /* Тепле тло контент-зони: білі картки/плитки мають видимі межі (раніше біле на білому) */
  background-color: var(--rb-page-bg, #F2EFE7);
}

/* no text-selection cursor on non-interactive elements */
body *:not(.peripheral-card *) {
  cursor: default;
  user-select: none;
}
input, textarea, [contenteditable="true"] {
  cursor: text;
  user-select: text;
}
/* Журнал процесу — виняток із kiosk-правила вище: його треба вміти виділити мишею
   й скопіювати (діагностика, відправка в підтримку). Селектор за id перебиває
   `body *:not(…)` за специфічністю, тож !important не потрібен. */
#process_log_container, #process_log_container * {
  user-select: text;
  cursor: text;
}
select {
  cursor: default;
}
button, .btn, a, label, [role="button"], [onclick] {
  cursor: pointer !important;
}
button *, .btn *, a *, label *, [role="button"] *, [onclick] * {
  cursor: pointer !important;
}
.nav-link, .nav-link * {
  cursor: pointer !important;
}

.feather {
  width: 16px;
  height: 16px;
}
@media (min-width: 992px) {
}
/* Картка-секція - єдиний вигляд із рештою розділів (біле тло, золота рамка,
   радіус, м'яка тінь; пор. п.13 дизайн-системи) */
.welcome-card,
.welcome-portal-card {
  background: #fff;
  border: 1px solid rgba(var(--rb-gold-rgb), 0.2);
  border-radius: var(--rb-radius-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  padding: 1rem;
}
.welcome-portal-card { margin-bottom: 1.5rem; }
.welcome-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--rb-font-display);
  font-weight: 700;
  color: var(--rb-green);
  margin-bottom: 0.75rem;
}
.welcome-empty { padding: 1rem; text-align: center; }
#welcome_pin_picker { margin-top: 0.75rem; }
.welcome-portal-open {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--rb-gold);
  text-decoration: none;
}
.welcome-portal-frame-wrap {
  position: relative;
  width: 100%;
  min-height: 360px;
}
#welcome_portal_iframe {
  width: 100%;
  height: 60vh;
  min-height: 360px;
  border: 0;
  border-radius: var(--rb-radius);
}
/* Заглушка офлайн - схована, показується JS лише якщо iframe не завантажився */
.welcome-portal-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  min-height: 360px;
  color: #6c757d;
  text-align: center;
  padding: 1rem;
}
.welcome-cloud-off { padding: 0.75rem 1rem; }

/*
 * Sidebar
 */

.sidebar {
  background-color: #fff; /* бічна панель — власна поверхня поверх теплого тла сторінки */
  position: fixed;
  top: 0;
  /* rtl:raw:
  right: 0;
  */
  bottom: 0;
  /* rtl:remove */
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
  height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports (height: 100dvh) {
  .sidebar-sticky {
    height: calc(100dvh - 48px);
  }
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #727272;
}

.sidebar .nav-link.active {
  color: #2470dc;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

/* keep the settings trigger on the bottom edge and let submenu grow upward in flow */
.sidebar-bottom-nav > .nav-item {
  display: flex;
  flex-direction: column-reverse;
}

#config_submenu {
  position: static;
  background-color: #f8f9fa;
  border: 1px solid rgba(0,0,0,.1);
  /* all corners squared */
  border-radius: 0;
  box-shadow: 0 -4px 12px rgba(0,0,0,.08);
  z-index: 101;
  margin-bottom: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* remove automatic indentation added by bootstrap (ms-4 on submenu UL) */
.sidebar .nav .nav {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* add left padding on links to simulate indent, no right padding necessary */
.sidebar .nav .nav .nav-link {
  padding-right: 0;
  padding-left: 1.5rem; /* match ms-4 spacing */
}

/* ensure the highlighted background stretches the full width of the sidebar */
.sidebar .nav .nav .nav-link:hover,
.sidebar .nav .nav .nav-link.active {
  display: block; /* make element full width */
  width: 100%;
}

/* fix native select dropdown black flash on dark OS theme */
.form-select,
.form-select option {
  background-color: #ffffff;
  color: #212529;
}

.peripheral-output-control {
    align-items: stretch;
    display: flex;
    align-items: center;
    height: 2.8rem;
}

.peripheral-output-control {
    align-items: stretch;
    display: flex;
    align-items: center;
    height: 2.8rem;
    width: 100%;
    min-height: 2.8rem;
}

.peripheral-meta-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer !important;
}

/* На мобільному прибираємо боковий gutter-padding контейнера периферії
   (.col-md-9 нав'язує 12px, який .px-0 не завжди перекриває) - картки
   майже на всю ширину, лишається лише малий gap між ними (g-2) */
@media (max-width: 767.98px) {
    #submenu_peripherals {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

.peripheral-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* Єдиний стиль картки-елемента зі .script-card: золота рамка, радіус, hover
       (перекриваємо сіру bootstrap .card-рамку) */
    border: 1px solid rgba(var(--rb-gold-rgb), 0.2) !important;
    border-radius: var(--rb-radius-lg) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden;
}

.peripheral-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(var(--rb-gold-rgb), 0.5) !important;
    box-shadow: 0 10px 20px rgba(var(--rb-gold-rgb), 0.15) !important;
}

.peripheral-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.peripheral-card-footer {
    flex: 0 0 auto;
    /* компактний відступ - кнопки 44px самі задають висоту, зайвий низ прибрано;
       горизонтальний padding узгоджено з хедером (8px), а не bootstrap 16px */
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

/* Пастельні шапка та футер у кольорі пристрою (--card-rgb ставить JS);
   тіло картки лишається білим. Fallback - фірмовий зелений */
/* Кольоровий лише хедер - він ідентифікує пристрій за кольором. Футер з
   діями лишається нейтральним (білим), щоб контроли читались (content-first) */
.peripheral-card-header {
    background: rgba(var(--card-rgb, var(--rb-green-rgb)), 0.12) !important;
}

.peripheral-card-header {
    border-bottom: 1px solid rgba(var(--card-rgb, var(--rb-green-rgb)), 0.22);
}

.peripheral-card-footer {
    background: #fff !important;
    border-top: 1px solid rgba(var(--rb-green-rgb), 0.12) !important;
}

/* Степер виходу у футері ділить простір з кнопкою налаштувань (контекстне:
   у параметрах степер на всю ширину, тут - поряд з кнопкою). Висота степера
   задана в самому компоненті .rb-stepper (global.css), тут не дублюється */
.peripheral-card-footer .peripheral-output-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.peripheral-card-value-wrap {
    min-height: 3rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

.peripheral-card-value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.25rem;
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.peripheral-card-value-number {
  font-size: clamp(1.4rem, 6vw, 4rem);
  line-height: 1;
    font-weight: 700;
    text-align: right;
    flex: 1 1 auto;
    min-width: 0;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    text-overflow: ellipsis;
    padding-right: 0.15em;
}

.peripheral-card-value-unit {
  font-size: clamp(0.7rem, 2.2vw, 1.15rem);
    color: #6c757d;
    font-weight: 600;
    white-space: nowrap;
    text-align: left;
    flex: 0 0 auto;
    min-width: 0;
    display: inline-block;
}

.peripheral-card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.peripheral-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.peripheral-meta-info .badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    min-height: 1.3rem;
    padding: 0.15em 0.4em;
    font-size: 0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.peripheral-card-value-number {
  font-size: clamp(1.4rem, 3.5vw, 2.75rem);
  line-height: 1;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  padding-right: 0.15em;
}

.peripheral-card-value-unit {
  font-size: clamp(0.7rem, 2.2vw, 1.15rem);
  color: #6c757d;
  font-weight: 600;
}

.peripheral-value-section {
    margin-right: 4%;
}

.settings-preserve-command-row .form-check-input {
  margin-left: 0;
}

/* submenu compact nav-links */
.sidebar .nav .nav .nav-link {
  font-size: 0.85rem;
  font-weight: 400;
}
.sidebar .nav .nav .nav-link:hover {
  background-color: rgba(0,0,0,.04);
  border-radius: .25rem;
}
.sidebar .nav .nav .nav-link.active {
  color: #2470dc;
  background-color: rgba(36,112,220,.08);
  border-radius: .25rem;
}

/* Collapsible sidebar */
@media (min-width: 768px) {
  .sidebar {
    transition: width 0.2s ease;
  }
  /* Collapsed sidebar width */
  .sidebar-collapsed .sidebar {
    width: 48px;
  }
  .sidebar-collapsed .sidebar .nav-link span {
    display: none;
  }
  .sidebar-collapsed .sidebar .nav-link {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }
  .sidebar-collapsed .sidebar .nav-link .feather {
    margin-right: 0;
  }
  .sidebar-collapsed .sidebar #config_submenu {
    display: none !important;
  }
  /* Main content expands when sidebar collapses — broad selector to match all layouts */
  .sidebar-collapsed main {
    margin-left: 48px !important;
    max-width: calc(100% - 48px) !important;
    flex: 0 0 calc(100% - 48px) !important;
    width: calc(100% - 48px) !important;
  }
  /* Navbar brand collapses with the sidebar */
  .navbar-brand {
    transition: width 0.2s ease, padding 0.2s ease;
    overflow: hidden;
    white-space: nowrap;
    display: flex !important;
    align-items: center;
    cursor: pointer;
  }
  .sidebar-collapsed .navbar-brand {
    width: 48px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center;
  }
  .sidebar-collapsed .navbar-brand .navbar-brand-text {
    display: none;
  }
  .sidebar-collapsed .navbar-brand img {
    margin: 0;
  }
}

.navbar-brand img {
  margin-right: 4px;
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .navbar-toggler {
  top: .25rem;
  right: 1rem;
}

.navbar .form-control {
  padding: .75rem 1rem;
}

/* (Видалено застарілий "Fix 1": він додавав 0.75rem padding до рядка карток
   на мобільному, що давало зайвий боковий відступ. Тепер відступами керує
   gutter сітки g-2 + перекриття .col-md-9 padding у медіазапиті вище.) */

/* --- Fix 3: prevent text wrapping during sidebar expand/collapse --- */
.sidebar .nav-link {
  white-space: nowrap;
  overflow: hidden;
}

/* --- Fix 4 & 5: mobile sidebar auto-height and overlay (not pushing content down) --- */
@media (max-width: 767.98px) {
  .row {
    position: relative; /* ensure absolute relative elements behave normally */
  }
  .sidebar {
    position: fixed !important; /* Stays anchored to the screen instead of the document */
    top: 48px !important; /* Mount perfectly underneath the sticky-top navbar */
    bottom: auto !important; /* Let the height wrap the native menu items naturally */
    max-height: calc(100dvh - 48px) !important; /* But never overflow beneath the visible screen floor */
    left: 0 !important;
    right: 0 !important;
    z-index: 1045 !important;
    background-color: #f8f9fa !important; /* Keep it light and force it */
    box-shadow: 0 6px 15px rgba(0,0,0,0.2) !important;
    padding-top: 0 !important; /* Remove the desktop 48px gap */
    padding-bottom: 0 !important;
    overflow-y: auto !important; /* Enable inner scrolling if menu is huge */
  }
  .sidebar.show {
    height: auto !important;
    display: block !important; /* make sure it displays block when shown */
  }
  .sidebar-sticky {
    position: static !important; /* Crucial: removes sticky/calc height issues */
    height: auto !important; 
    min-height: auto !important;
    display: block !important;
    overflow: visible !important;
    padding-bottom: 1.5rem !important; /* Standard padding for list termination without wasteful void space */
  }

  /* Hamburger Menu Margin Fix */
  .navbar-toggler {
    right: 1.25rem !important; /* Add right margin gap to the hamburger button */
    margin-right: 1rem !important; /* Force margin if right property fails */
  }

  /* Mobile Flex Button Fixes */
  .mobile-sort-select {
    flex-grow: 1 !important; /* Makes the sort dropdown fill the first row */
  }
  .mobile-buttons-container {
    width: 100% !important; /* Forces buttons wrapper to drop to a new row */
    margin-top: 0.5rem !important;
  }
  .mobile-buttons-container .btn {
    flex: 1 1 0 !important; /* Splits the two buttons exactly in half factoring in their side gaps */
    justify-content: center;
    display: flex;
    align-items: center;
  }

  /* Global mobile padding for main elements so headers don't touch the screen edge */
  main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* --- Fix 6: consistent main content padding on mobile --- */

/* Fixed width container for card icons to ensure perfect vertical alignment across all peripheral cards */
.peripheral-card-icon-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 40px !important;
  min-width: 40px !important;
}
@media (max-width: 767.98px) {
  main.col-md-9 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ── Сторінка виконання сценарію (діаграма процесу) ─────────────────────── */
/* Панель оператора: безпекова інформація (стан, крок, «Готово», STOP)
   видима завжди — sticky над контентом сторінки, під модалками */
.process-operator-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
}

/* Закладки блоків: плитки з інлайн-іконкою (анатомія п.18), компактніші за
   плитки вибору пристроїв */
.process-blocks-nav .device-type-tile {
  min-height: 72px;
  padding: 0.5rem 0.75rem;
}
.process-blocks-nav .device-type-tile span {
  min-height: 0;
}
/* Інлайн-іконка плитки блока (nav, пікер колонки, заголовок колонки) */
.process-block-ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.device-type-tile .process-block-ico {
  margin-bottom: 4px;
}

/* Фаза 2: розкладка 1-2-3 колонки на сторінці виконання */
.process-layout-btn.active {
  background: rgba(var(--rb-gold-rgb), 0.18);
  border-radius: 10px;
}
.process-col-body > [data-process_block] {
  width: 100%;
}

/* Пікер блока колонки: заголовок-кнопка + сітка плиток по тапу */
.process-col-title {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: #fff;
  border: 1px solid rgba(var(--rb-gold-rgb), 0.25);
  border-radius: var(--rb-radius);
  font-weight: 600;
}
.process-col-title:focus-visible {
  outline: 2px solid var(--rb-gold);
  outline-offset: 2px;
}
.process-col-choices {
  margin-top: 0.25rem;
}

/* Фаза 3: перемикачі величин у блоці «Графіки» — плитки .device-type-tile
   (стан .active = графік увімкнено), кастомних чіпів нема */

/* .device-type-grid оголошено з display:grid !important (global.css), тож
   інлайновий display:none її НЕ ховає. Ховаємо лише класом d-none —
   подвійний клас дає вищу специфічність за одиночний !important-селектор */
.device-type-grid.d-none {
  display: none !important;
}

/* Виразніший заголовок колонки: пастельно-золота шапка (фідбек користувача) */
.process-col-title {
  background: rgba(var(--rb-gold-rgb), 0.10);
  border-color: rgba(var(--rb-gold-rgb), 0.4);
  color: var(--rb-green);
  font-weight: 700;
}

/* Шапка графіка: іконка величини + назва (замість title усередині Google Chart) */
.chart-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.25rem 0;
  font-weight: 700;
  color: var(--rb-green);
}
.chart-header .rb-icon-mask {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* Вертикальний степер кроків сценарію (фіксована ширина, не залежить від екрана) */
.process-stepper {
  width: 100%;
}
.ps-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0 0.3rem 1.5rem;
}
.ps-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(var(--rb-gold-rgb), 0.3);
}
.ps-item:first-child::before { top: 50%; }
.ps-item:last-child::before { bottom: 50%; }
.ps-dot {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #b8c0c8;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.ps-item.done .ps-dot { background: #43ab44; }
.ps-item.active .ps-dot {
  width: 16px;
  height: 16px;
  left: 1px;
  background: var(--rb-gold);
  box-shadow: 0 0 6px rgba(var(--rb-gold-rgb), 0.7);
}
.ps-item.future { opacity: 0.55; }
.ps-active-card {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(var(--rb-gold-rgb), 0.4);
  border-radius: var(--rb-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 0.6rem 0.8rem;
}
.ps-hold-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(var(--rb-gold-rgb), 0.15);
  overflow: hidden;
}
.ps-hold-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--rb-gold);
  transition: width 0.4s ease;
}

/* SCADA-гейджі активного кроку поруч зі степером */
.process-step-gauge { width: 150px; }

/* Повідомлення оператору на активному кроці (конфіг «Етапи») */
.ps-step-msg {
  background: rgba(var(--rb-gold-rgb), 0.12);
  border-left: 3px solid var(--rb-gold);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  font-weight: 600;
  color: var(--rb-green);
}

/* Панель тривалостей на сторінці виконання (інлайн-іконки, дизайн-система) */
.pt-metric {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.pt-ico {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--rb-gold);
  margin-top: 2px;
}
.pt-body { min-width: 0; }
.pt-label {
  font-size: var(--rb-fs-caption);
  color: var(--rb-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.pt-value {
  font-family: var(--rb-font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--rb-green);
  line-height: 1.2;
}
.pt-sub {
  font-size: 0.72rem;
  color: var(--rb-text-muted);
}

/* Живі показники скриптів у центральній колонці банера. Та сама сітка, що й
   тривалості (.pt-metric): іконка-жолоб + тіло, тож усі іконки й увесь текст
   вирівняні в спільні колонки. Рядки «підпис · значення» (значення — акцентом). */
.pbi-group {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem; /* = .pt-metric */
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(var(--rb-green-rgb), 0.12);
}
/* Іконка скрипта — той самий жолоб і розмір, що .pt-ico; тонована зеленим (маска).
   Специфічність .pbi-ico.rb-icon-mask перебиває базові 16px глобального .rb-icon-mask */
.pbi-ico.rb-icon-mask {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 1px 0 0 0; /* відступ дає gap групи, не rb-icon-mask */
  background-color: var(--rb-green);
}
.pbi-body {
  flex: 1 1 auto;
  min-width: 0;
}
.pbi-title {
  font-size: var(--rb-fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--rb-green);
  margin-bottom: 0.2rem;
}
.pbi-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  line-height: 1.35;
}
.pbi-label {
  font-size: 0.8rem;
  color: var(--rb-text-muted);
  min-width: 0;
}
.pbi-val {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--rb-green);
  font-variant-numeric: tabular-nums;
}

/* Редактор «Показники скриптів»: окрема панель на скрипт (шапка з іконкою +
   рядки читань). Картка розділу за дизайн-системою (біле тло, золота рамка). */
.scene-telem-panel {
  background: #fff;
  border: 1px solid rgba(var(--rb-gold-rgb), 0.2);
  border-radius: var(--rb-radius-lg);
  padding: 0.5rem 0.7rem 0.6rem;
  margin-bottom: 0.75rem;
}
.scene-telem-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(var(--rb-green-rgb), 0.12);
  font-weight: 700;
  color: var(--rb-green);
}
.scene-telem-ico.rb-icon-mask {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 0;
  background-color: var(--rb-green);
}

/* Сцена в тілі картки сценарію (праворуч від гейджа етапів) — виражена */
.sc-card-scene {
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}

/* Гейдж етапів у картці сценарію — компактніший за версію на сторінці виконання */
.sc-card-stepper { max-width: 100%; font-size: 0.82rem; }
.sc-card-stepper .ps-active-card { padding: 0.45rem 0.6rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); }
.sc-card-stepper .ps-item { padding-top: 0.2rem; padding-bottom: 0.2rem; }