/* ======================================================================
   SwordControl Studio — Components
   Buttons, inputs, cards, tables, modals, toast, tabs, badges, metrics
   ====================================================================== */

/* Buttons --------------------------------------------------------- */
.sc-button,
.sc-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sc-space-2);
  min-height: 34px;
  padding: 0 var(--sc-space-4);
  border: 1px solid var(--sc-border);
  background: var(--sc-surface-0);
  color: var(--sc-text);
  font-size: var(--sc-fs-sm);
  font-weight: var(--sc-fw-medium);
  border-radius: var(--sc-radius);
  transition: background var(--sc-fast) var(--sc-ease),
              border-color var(--sc-fast) var(--sc-ease),
              color var(--sc-fast) var(--sc-ease);
  cursor: pointer;
  white-space: nowrap;
}

.sc-button:hover,
.sc-icon-button:hover { background: var(--sc-surface-1); border-color: var(--sc-border-strong); }
.sc-button:active,
.sc-icon-button:active { background: var(--sc-surface-hover); }
.sc-button:disabled,
.sc-icon-button:disabled { opacity: .45; cursor: not-allowed; }

.sc-button--primary {
  background: var(--sc-green-bg);
  border-color: color-mix(in srgb, var(--sc-dark-green-tea) 40%, transparent);
  color: var(--sc-green);
}
.sc-button--primary:hover {
  background: color-mix(in srgb, var(--sc-dark-green-tea) 16%, transparent);
  border-color: color-mix(in srgb, var(--sc-dark-green-tea) 60%, transparent);
}

.sc-button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--sc-text-2);
}
.sc-button--ghost:hover { background: var(--sc-surface-1); color: var(--sc-text); }

.sc-button--danger {
  background: var(--sc-red-bg);
  border-color: color-mix(in srgb, var(--sc-red) 35%, transparent);
  color: var(--sc-red);
}
.sc-button--danger:hover {
  background: color-mix(in srgb, var(--sc-red) 16%, transparent);
  border-color: color-mix(in srgb, var(--sc-red) 55%, transparent);
}

.sc-button--icon {
  width: 34px;
  padding: 0;
}

/* .sc-icon-button is the name the pages and their scripts already use, .sc-button--icon is
   this system's own name for the same control; both must draw the same box, so the box is
   shared above and only the square width is set here.

   Ported from management-ui.css, where the two names shared one declaration block
   (`.sc-button,.sc-icon-button{…}`). Pages that still carry only the legacy name would
   otherwise lose the look silently once that file is no longer linked. */
.sc-icon-button {
  width: 34px;
  padding: 0;
}
.sc-icon-button--compact {
  width: 28px;
  min-height: 28px;
}

/* Segmented control ------------------------------------------------ */
.sc-segmented {
  display: inline-flex;
  height: var(--sc-control-h);
  padding: 2px;
  gap: 2px;
  border: 1px solid var(--sc-border);
  background: var(--sc-bg-1);
}

.sc-segment {
  height: 100%;
  min-width: 56px;
  padding: 0 var(--sc-space-2);
  border: 0;
  background: transparent;
  color: var(--sc-text-2);
  font: var(--sc-fw-medium) var(--sc-fs-xs) var(--sc-font-ui);
  cursor: pointer;
}
.sc-segment:hover { color: var(--sc-text); background: var(--sc-surface-1); }
.sc-segment.is-active { background: var(--sc-surface-active); color: var(--sc-text); }

/* Inputs ---------------------------------------------------------- */
.sc-field {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
}

.sc-field__label {
  font-size: var(--sc-fs-sm);
  color: var(--sc-text-2);
  font-weight: var(--sc-fw-medium);
}

.sc-input,
.sc-select,
.sc-textarea {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  padding: 0 var(--sc-space-3);
  border: 1px solid var(--sc-border);
  background: var(--sc-bg-1);
  color: var(--sc-text);
  font-size: var(--sc-fs-sm);
  border-radius: var(--sc-radius);
  transition: border-color var(--sc-fast) var(--sc-ease),
              background var(--sc-fast) var(--sc-ease);
}

.sc-textarea {
  min-height: 88px;
  padding: var(--sc-space-3);
  resize: vertical;
}

.sc-input:hover,
.sc-select:hover,
.sc-textarea:hover { border-color: var(--sc-border-strong); }

.sc-input:focus,
.sc-select:focus,
.sc-textarea:focus {
  border-color: var(--sc-dark-green-tea);
  background: var(--sc-surface-0);
  outline: none;
}

.sc-input[disabled],
.sc-select[disabled],
.sc-textarea[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.sc-field--error .sc-input,
.sc-field--error .sc-select,
.sc-field--error .sc-textarea { border-color: var(--sc-red); }

.sc-field__hint {
  font-size: var(--sc-fs-xs);
  color: var(--sc-text-3);
}

.sc-field--error .sc-field__hint { color: var(--sc-red); }

/* Checkbox / Radio ------------------------------------------------ */
.sc-checkbox,
.sc-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  cursor: pointer;
  font-size: var(--sc-fs-sm);
  color: var(--sc-text-2);
}

.sc-checkbox input,
.sc-radio input {
  width: 16px;
  height: 16px;
  accent-color: var(--sc-green);
}

/* Card ------------------------------------------------------------ */
.sc-card {
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-3);
  padding: var(--sc-space-7);
  background: var(--sc-surface-0);
  border-radius: var(--sc-radius-large);
  transition: background var(--sc-fast) var(--sc-ease);
}

.sc-card--interactive { cursor: pointer; }
.sc-card--interactive:hover { background: var(--sc-surface-1); }

.sc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
}

.sc-card__title {
  font-size: var(--sc-fs-lg);
  font-weight: var(--sc-fw-medium);
  color: var(--sc-text);
}

.sc-card__body {
  font-size: var(--sc-fs-sm);
  color: var(--sc-text-3);
  line-height: var(--sc-lh-loose);
}

.sc-card__footer {
  display: flex;
  align-items: center;
  gap: var(--sc-space-2);
  margin-top: auto;
}

/* Panel ----------------------------------------------------------- */
.sc-panel {
  padding: var(--sc-space-6);
  background: var(--sc-surface-0);
  border: 1px solid var(--sc-border-subtle);
  border-radius: var(--sc-radius-large);
}

.sc-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sc-space-3);
  padding-bottom: var(--sc-space-4);
  margin-bottom: var(--sc-space-4);
  border-bottom: 1px solid var(--sc-border-subtle);
}

.sc-panel__title {
  font-size: var(--sc-fs-md);
  font-weight: var(--sc-fw-medium);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Table ----------------------------------------------------------- */
.sc-table {
  width: 100%;
  font-size: var(--sc-fs-sm);
  color: var(--sc-text-2);
}

.sc-table thead {
  background: var(--sc-bg-1);
}

.sc-table th {
  text-align: left;
  padding: var(--sc-space-3) var(--sc-space-4);
  color: var(--sc-text-3);
  font-size: var(--sc-fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: var(--sc-fw-medium);
  border-bottom: 1px solid var(--sc-border-subtle);
}

.sc-table td {
  padding: var(--sc-space-4);
  border-bottom: 1px solid var(--sc-border-subtle);
}

.sc-table tbody tr {
  transition: background var(--sc-fast) var(--sc-ease);
}

.sc-table tbody tr:hover { background: var(--sc-surface-0); }

/* Modal ----------------------------------------------------------- */
.sc-modal {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--sc-text);
  max-width: min(560px, 92vw);
  /* Центрирование задаём сами: страницы приложений переопределяют отступы у <dialog>,
     и окно уезжало в левый верхний угол (это было видно в админке). */
  margin: auto;
}

.sc-modal::backdrop { background: rgba(0,0,0,.55); }

.sc-modal__surface {
  background: var(--sc-bg-1);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-large);
  padding: var(--sc-space-7);
  box-shadow: var(--sc-shadow-2);
}

.sc-modal__title {
  font-size: var(--sc-fs-lg);
  font-weight: var(--sc-fw-medium);
  margin-bottom: var(--sc-space-4);
}

.sc-modal__body {
  font-size: var(--sc-fs-sm);
  color: var(--sc-text-2);
  margin-bottom: var(--sc-space-6);
}

.sc-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--sc-space-3);
}

/* Toast ----------------------------------------------------------- */
.sc-toast-host {
  position: fixed;
  right: var(--sc-space-5);
  bottom: var(--sc-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--sc-space-2);
  z-index: var(--sc-z-toast);
}

.sc-toast {
  position: relative;
  min-width: 220px;
  max-width: 380px;
  padding: var(--sc-space-4) var(--sc-space-5);
  background: var(--sc-bg-1);
  border: 1px solid var(--sc-border);
  border-left: 2px solid var(--sc-border-strong);
  border-radius: var(--sc-radius);
  color: var(--sc-text);
  font-size: var(--sc-fs-sm);
  box-shadow: var(--sc-shadow-2);
}

/* Внутренняя раскладка тоста: заголовок, текст и, когда действие необратимо, кнопка отмены.
   journal действий (public/operator-action-log.js) и SCUI.toast используют одну и ту же разметку. */
.sc-toast__body { display: grid; gap: 2px; padding-right: var(--sc-space-4); }
.sc-toast__title { font-weight: var(--sc-fw-semibold); color: var(--sc-text); }
.sc-toast__text { color: var(--sc-text-2); }
.sc-toast__action {
  margin-top: var(--sc-space-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--sc-dark-green-tea);
  font: inherit;
  font-weight: var(--sc-fw-semibold);
  cursor: pointer;
  text-align: left;
}
.sc-toast__action:hover { text-decoration: underline; }
.sc-toast__close {
  position: absolute;
  top: var(--sc-space-2);
  right: var(--sc-space-2);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sc-text-disabled);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.sc-toast__close:hover { color: var(--sc-text); }

.sc-toast--info { border-left-color: var(--sc-dark-green-tea); }
.sc-toast--success { border-left-color: var(--sc-green); }
.sc-toast--warning { border-left-color: var(--sc-amber); }
.sc-toast--error { border-left-color: var(--sc-red); }

/* Tabs ------------------------------------------------------------ */
.sc-tabs {
  display: flex;
  align-items: center;
  gap: var(--sc-space-1);
  padding: 4px;
  background: var(--sc-bg-1);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  overflow-x: auto;
  scrollbar-width: none;
}

.sc-tabs::-webkit-scrollbar { display: none; }

.sc-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  min-height: 32px;
  padding: 0 var(--sc-space-4);
  border: 1px solid transparent;
  border-radius: var(--sc-radius-sm);
  background: transparent;
  color: var(--sc-text-2);
  font-size: var(--sc-fs-sm);
  font-weight: var(--sc-fw-medium);
  white-space: nowrap;
  transition: background var(--sc-fast) var(--sc-ease);
}

.sc-tab:hover { background: var(--sc-surface-1); color: var(--sc-text); }

.sc-tab.active {
  background: var(--sc-surface-active);
  border-color: color-mix(in srgb, var(--sc-dark-green-tea) 30%, transparent);
  color: var(--sc-green-strong);
}

/* Badges ---------------------------------------------------------- */
.sc-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--sc-space-3);
  border: 1px solid var(--sc-border);
  background: var(--sc-bg-1);
  color: var(--sc-text-3);
  font-size: var(--sc-fs-xs);
  font-weight: var(--sc-fw-medium);
  border-radius: var(--sc-radius-sm);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sc-badge--public { color: var(--sc-green); border-color: color-mix(in srgb, var(--sc-dark-green-tea) 30%, transparent); background: var(--sc-green-bg); }
.sc-badge--role { color: var(--sc-amber); border-color: color-mix(in srgb, var(--sc-amber) 30%, transparent); background: var(--sc-amber-bg); }
.sc-badge--danger { color: var(--sc-red); border-color: color-mix(in srgb, var(--sc-red) 30%, transparent); background: var(--sc-red-bg); }

/* Metrics --------------------------------------------------------- */
.sc-metrics {
  display: flex;
  gap: var(--sc-space-8);
  flex-wrap: wrap;
}

.sc-metric { min-width: 70px; }

.sc-metric__label {
  font-size: var(--sc-fs-sm);
  color: var(--sc-text-3);
}

.sc-metric__value {
  margin-top: var(--sc-space-3);
  /* Раньше здесь стояло 19px — единственный размер дизайн-системы вне её же шкалы.
     20px (--sc-fs-xl) — соседний шаг шкалы, и это заметно только на карточках метрик. */
  font-size: var(--sc-fs-xl);
  font-weight: var(--sc-fw-medium);
  color: var(--sc-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-metric--ok .sc-metric__value { color: var(--sc-green); }
.sc-metric--warn .sc-metric__value { color: var(--sc-amber); }
.sc-metric--error .sc-metric__value { color: var(--sc-red); }

/* Empty / Loader / Skeleton -------------------------------------- */
.sc-empty {
  display: grid;
  place-items: center;
  min-height: 120px;
  padding: var(--sc-space-6);
  border: 1px dashed var(--sc-border-subtle);
  border-radius: var(--sc-radius-large);
  color: var(--sc-text-3);
  font-size: var(--sc-fs-sm);
  text-align: center;
}

.sc-skeleton {
  background: linear-gradient(90deg, var(--sc-surface-0) 25%, var(--sc-surface-1) 50%, var(--sc-surface-0) 75%);
  background-size: 200% 100%;
  animation: sc-skeleton 1.4s ease infinite;
  border-radius: var(--sc-radius-sm);
  min-height: 16px;
}

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

/* Tooltip --------------------------------------------------------- */
.sc-tooltip {
  position: relative;
}

.sc-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--sc-space-2) var(--sc-space-3);
  background: var(--sc-bg-1);
  border: 1px solid var(--sc-border);
  color: var(--sc-text);
  font-size: var(--sc-fs-xs);
  border-radius: var(--sc-radius-sm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sc-fast) var(--sc-ease);
  z-index: 10;
}

.sc-tooltip:hover::after { opacity: 1; }

/* Grid ------------------------------------------------------------ */
.sc-grid {
  display: grid;
  gap: var(--sc-space-5);
}

.sc-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ======================================================================
   Ported from the legacy foundation (management-ui.css)

   Everything below existed only in management-ui.css. A page moved onto this system stops
   linking that file, so markup using these blocks lost its styling silently - which is why
   tools/report-class-coverage.cjs exists, and why ui-kit.html (a catalogue with no page layer
   of its own) could not be migrated before this port.

   Values are unchanged; only token names follow this system:
   --sc-fs-10 and --sc-fs-11 -> --sc-fs-xs, --sc-fs-12 -> --sc-fs-sm,
   --sc-1 -> --sc-space-1, --sc-2 -> --sc-space-3, --sc-panel-pad -> --sc-space-4,
   --sc-control-compact-h -> 28px, --sc-tab-h is not needed (this system's .sc-tab differs).
   One deliberate difference: the legacy 10px step has no equivalent here, so 10px labels
   render at 11px (--sc-fs-xs) rather than earning a token of their own.
   Translucent tints that the legacy wrote as rgba() of its own palette are written as
   color-mix() of this system's tokens, so a token change carries through.
   ====================================================================== */

/* App shell ------------------------------------------------------- */
.sc-app {
  min-height: 100vh;
  background: var(--sc-bg-0);
  color: var(--sc-text);
  font-family: var(--sc-font-ui);
}

.sc-spacer { flex: 1; }

/* Status pill ----------------------------------------------------- */
.sc-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-space-2);
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  background: var(--sc-surface-1);
  color: var(--sc-text-2);
  font-size: var(--sc-fs-xs);
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.sc-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sc-text-3);
}

.sc-status--ready {
  color: var(--sc-green);
  border-color: color-mix(in srgb, var(--sc-green) 34%, transparent);
  background: var(--sc-green-bg);
}
.sc-status--ready .sc-status__dot { background: var(--sc-green); }

.sc-status--warning {
  color: var(--sc-amber);
  border-color: color-mix(in srgb, var(--sc-amber) 34%, transparent);
  background: var(--sc-amber-bg);
}
.sc-status--warning .sc-status__dot { background: var(--sc-amber); }

.sc-status--error {
  color: var(--sc-red);
  border-color: color-mix(in srgb, var(--sc-red) 34%, transparent);
  background: var(--sc-red-bg);
}
.sc-status--error .sc-status__dot { background: var(--sc-red); }

.sc-status--onair {
  color: var(--sc-text);
  border-color: var(--sc-onair);
  background: color-mix(in srgb, var(--sc-onair) 18%, transparent);
}
.sc-status--onair .sc-status__dot {
  background: var(--sc-onair);
  box-shadow: 0 0 10px color-mix(in srgb, var(--sc-onair) 60%, transparent);
}

/* Status bar ------------------------------------------------------ */
.sc-statusbar {
  height: var(--sc-status-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 9px;
  border-top: 1px solid var(--sc-border);
  background: var(--sc-bg-1);
  color: var(--sc-text-3);
  font-size: var(--sc-fs-xs);
}

.sc-statusbar__spacer { flex: 1; }

/* Menu ------------------------------------------------------------ */
.sc-menu {
  min-width: 190px;
  padding: var(--sc-space-1);
  border: 1px solid var(--sc-border-strong);
  border-radius: var(--sc-radius-large);
  background: var(--sc-surface-1);
  box-shadow: var(--sc-shadow-popup);
  z-index: 1000;
}

.sc-menu-item {
  min-height: 30px;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 0 var(--sc-space-3);
  color: var(--sc-text-2);
  font-size: var(--sc-fs-xs);
  cursor: pointer;
}
.sc-menu-item:hover,
.sc-menu-item.is-active { background: var(--sc-surface-hover); color: var(--sc-text); }
.sc-menu-item.is-danger { color: var(--sc-red); }

.sc-menu-item__shortcut {
  color: var(--sc-text-3);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-fs-xs);
}

.sc-menu-separator {
  height: 1px;
  margin: var(--sc-space-1);
  background: var(--sc-border);
}

/* List ------------------------------------------------------------ */
.sc-list {
  border: 1px solid var(--sc-border);
  background: var(--sc-bg-1);
}

.sc-list-item {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: var(--sc-space-3);
  padding: 0 9px;
  border-bottom: 1px solid var(--sc-border-subtle);
  color: var(--sc-text-2);
  font-size: var(--sc-fs-xs);
  cursor: pointer;
}
.sc-list-item:last-child { border-bottom: 0; }
.sc-list-item:hover { background: var(--sc-surface-1); color: var(--sc-text); }
.sc-list-item.is-selected { background: var(--sc-dark-green-tea-bg); color: var(--sc-text); }

/* Checkbox and switch --------------------------------------------- */
.sc-check,
.sc-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sc-text-2);
  font-size: var(--sc-fs-xs);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
}

.sc-check input,
.sc-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sc-check__box {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border: 1px solid var(--sc-border-strong);
  background: var(--sc-bg-1);
  color: var(--sc-bg-0);
  font-size: 10px;
}
.sc-check input:checked + .sc-check__box { background: var(--sc-dark-green-tea); border-color: var(--sc-dark-green-tea); }
.sc-check input:checked + .sc-check__box::after { content: "✓"; font-weight: 900; }

.sc-switch__track {
  width: 28px;
  height: 16px;
  position: relative;
  border: 1px solid var(--sc-border-strong);
  background: var(--sc-bg-1);
  transition: background var(--sc-fast), border-color var(--sc-fast);
}
.sc-switch__track::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  left: 2px;
  top: 2px;
  background: var(--sc-text-3);
  transition: transform var(--sc-fast) var(--sc-ease), background var(--sc-fast);
}
.sc-switch input:checked + .sc-switch__track { background: var(--sc-dark-green-tea-bg); border-color: var(--sc-dark-green-tea); }
.sc-switch input:checked + .sc-switch__track::after { transform: translateX(12px); background: var(--sc-dark-green-tea); }

/* Inspector ------------------------------------------------------- */
.sc-inspector {
  min-width: 250px;
  border-left: 1px solid var(--sc-border);
  background: var(--sc-surface-0);
}

.sc-inspector-section { border-bottom: 1px solid var(--sc-border-subtle); }

.sc-inspector-section__head {
  height: var(--sc-control-h);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 9px;
  background: var(--sc-bg-1);
  font-size: var(--sc-fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
  cursor: pointer;
}

.sc-inspector-section__body {
  padding: 9px;
  display: grid;
  gap: var(--sc-space-3);
}
.sc-inspector-section.is-collapsed .sc-inspector-section__body { display: none; }

/* Splitters ------------------------------------------------------- */
.sc-splitter-h,
.sc-splitter-v {
  position: relative;
  background: transparent;
}
.sc-splitter-h { height: 5px; cursor: row-resize; }
.sc-splitter-v { width: 5px; cursor: col-resize; }

.sc-splitter-h::after,
.sc-splitter-v::after {
  content: "";
  position: absolute;
  background: var(--sc-border);
}
.sc-splitter-h::after { left: 0; right: 0; top: 2px; height: 1px; }
.sc-splitter-v::after { top: 0; bottom: 0; left: 2px; width: 1px; }
.sc-splitter-h:hover::after,
.sc-splitter-v:hover::after { background: var(--sc-dark-green-tea); }

/* Panel sections -------------------------------------------------- */
.sc-panel__header {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: var(--sc-space-3);
  padding: 0 10px;
  border-bottom: 1px solid var(--sc-border);
  background: var(--sc-bg-1);
}

.sc-panel__title {
  font-size: var(--sc-fs-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.sc-panel__meta {
  font-size: var(--sc-fs-xs);
  color: var(--sc-text-3);
}

.sc-panel__body { padding: var(--sc-space-4); }

/* Badge modifiers ------------------------------------------------- */
.sc-badge--blue {
  color: var(--sc-dark-green-tea);
  border-color: color-mix(in srgb, var(--sc-dark-green-tea) 34%, transparent);
  background: var(--sc-dark-green-tea-bg);
}

.sc-badge--green {
  color: var(--sc-green);
  border-color: color-mix(in srgb, var(--sc-green) 34%, transparent);
  background: var(--sc-green-bg);
}

/* Section title, code, keys --------------------------------------- */
.sc-section-title {
  margin: 0 0 var(--sc-space-3);
  font-size: var(--sc-fs-xs);
  font-weight: 800;
  color: var(--sc-text-3);
  letter-spacing: .075em;
  text-transform: uppercase;
}

.sc-code {
  padding: 2px 5px;
  border: 1px solid var(--sc-border);
  background: var(--sc-bg-1);
  color: var(--sc-text-2);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-fs-xs);
}

.sc-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--sc-border-strong);
  background: var(--sc-bg-2);
  color: var(--sc-text-2);
  font: 600 9px var(--sc-font-mono);
}

/* Table wrapper --------------------------------------------------- */
.sc-table-wrap {
  border: 1px solid var(--sc-border);
  background: var(--sc-bg-1);
  overflow: auto;
}

/* Compact button and the legacy state classes --------------------- */
.sc-button--compact {
  height: 28px;
  padding: 0 var(--sc-space-3);
  font-size: var(--sc-fs-xs);
}

.sc-button.is-pressed { background: var(--sc-surface-active); }

.sc-table tr.is-selected td { background: var(--sc-dark-green-tea-bg); color: var(--sc-text); }
/* Ввод одной строки (public/sc-prompt.js) ---------------------------
   Диалог собран из .sc-modal, здесь только поле и подсказка: окно должно
   выглядеть одинаково в админке, на пульте графики и в редакторе слоёв. */
.sc-prompt__field { display: grid; gap: var(--sc-space-2); margin-bottom: var(--sc-space-6); }
.sc-prompt__field .sc-input { width: 100%; }
.sc-prompt__hint { margin-bottom: var(--sc-space-4); }