/* =========================================================
   ГЕНЕРАТОР SCHEMA.ORG — стили рабочей области
   ========================================================= */

.sg-tool {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 8px 0;
}

/* =========================================================
   Переиспользуемые общие элементы (копии из htaccess-generator.css/
   og-generator.css — страница самодостаточна, без межфайловых
   зависимостей между инструментами)
   ========================================================= */

.robots-block-tag {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(29, 217, 122, 0.1);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-accent-dark);
  font-family: var(--font-mono);
  margin-left: 4px;
}

.robots-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: 1.5px dashed rgba(43, 47, 51, 0.18);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.robots-add-btn:hover {
  border-color: rgba(29, 217, 122, 0.4);
  border-style: solid;
  color: var(--color-accent-dark);
  background: rgba(29, 217, 122, 0.05);
}

.robots-rule-remove {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(43, 47, 51, 0.08);
  background: var(--color-bg);
  color: var(--color-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.robots-rule-remove:hover {
  border-color: rgba(232, 93, 93, 0.35);
  color: #c94747;
  background: rgba(232, 93, 93, 0.06);
}

.hta-block-head { margin-bottom: 18px; }
.hta-block-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  margin: 0 0 6px 0;
}
.hta-block-head h2 i { color: var(--color-accent-dark); font-size: 18px; }
.hta-block-head p { font-size: 13.5px; color: var(--color-muted); margin: 0; }

.hta-toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 14px;
}
.hta-toggle-label input[type="checkbox"] {
  width: 18px; height: 18px; min-width: 18px; margin-top: 1px;
  cursor: pointer; accent-color: var(--color-accent);
}

.hta-info-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(29, 217, 122, 0.05);
  border-left: 3px solid var(--color-accent);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.hta-info-block i { color: var(--color-accent-dark); font-size: 15px; margin-top: 2px; flex-shrink: 0; }
.hta-info-block p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--color-text); }
.hta-info-block.is-warning { background: rgba(232, 159, 66, 0.08); border-left-color: #e89f42; }
.hta-info-block.is-warning i { color: #c9823f; }

.hta-actions-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.hta-action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; background: var(--color-bg);
  border: 1.5px solid rgba(43, 47, 51, 0.08); border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 600; color: var(--color-text);
  cursor: pointer; transition: all var(--transition-fast); text-decoration: none;
}
.hta-action-btn:hover { border-color: rgba(29, 217, 122, 0.35); color: var(--color-accent-dark); background: rgba(29, 217, 122, 0.06); }
.hta-action-btn.is-primary { background: var(--color-accent); border-color: var(--color-accent); color: #06231a; }
.hta-action-btn.is-primary:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }

.hta-copy-float {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  border-radius: 8px; border: 1px solid rgba(43, 47, 51, 0.08);
  background: var(--color-surface); color: var(--color-muted);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all var(--transition-fast);
}
.hta-copy-float:hover { color: var(--color-accent-dark); border-color: rgba(29, 217, 122, 0.35); }
.hta-copy-float.is-copied { background: var(--color-accent); border-color: var(--color-accent); color: #06231a; }

.hta-footnote {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--color-muted); margin: 4px 0 0 0;
}
.hta-footnote i { color: var(--color-accent-dark); font-size: 14px; }

.hta-warnings-title {
  display: flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 14px; color: #c94747; margin-bottom: 10px;
}

.og-optional { font-weight: 400; color: var(--color-muted); font-size: 11.5px; font-family: var(--font-mono); }

.hta-field-hint { display: block; font-size: 12px; color: var(--color-muted); line-height: 1.5; margin-top: 4px; }

.og-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
@media (max-width: 800px) { .og-compare-grid { grid-template-columns: 1fr; } }
.og-compare-card { background: var(--color-surface); border: 1.5px solid rgba(43, 47, 51, 0.06); border-radius: var(--radius-lg); padding: 26px; }
.og-compare-icon {
  width: 42px; height: 42px; min-width: 42px; border-radius: var(--radius-sm);
  background: rgba(29, 217, 122, 0.12); color: var(--color-accent-dark);
  display: flex; align-items: center; justify-content: center; font-size: 19px;
}
.og-compare-card h3 { font-size: 18px; margin: 0 0 14px 0; }
.og-compare-lead { font-size: 14px; color: var(--color-text); line-height: 1.7; margin: 0 0 16px 0; }
.og-compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.og-compare-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.6; color: var(--color-text); }
.og-compare-list i { color: var(--color-accent-dark); font-size: 14px; margin-top: 3px; flex-shrink: 0; }

/* =========================================================
   Переключатель вкладок
   ========================================================= */

/* Тринадцать типов не помещаются в строку. Горизонтальная лента
   обрезала последние вкладки прямо посередине и на мобильном
   превращалась в скрытый скролл, поэтому здесь ровная сетка:
   все ячейки одинаковой ширины, ничего не выходит за блок,
   число колонок подстраивается под ширину экрана. */
/* Сетка равных ячеек растягивала «FAQ» и «Сайт» до ширины
   «Хлебных крошек» и оставляла внутри пустые поля по сторонам.
   Поэтому ряд из кнопок по ширине содержимого с переносом:
   ширина у каждой своя, высота и отступы — общие. */
.sg-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

.sg-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 40px — компактнее прежних 44, но всё ещё комфортная
     зона нажатия вместе с внешним отступом ряда */
  height: 40px;
  padding: 0 13px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

/* На узких экранах длинные подписи не должны выталкивать кнопку
   за пределы блока: разрешаем ей сжаться и обрезать текст */
@media (max-width: 420px) {
  .sg-tab {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.sg-tab i {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
  color: var(--color-muted);
  transition: color var(--transition-fast);
}

.sg-tab:hover { color: var(--color-text-strong); }
.sg-tab:hover i { color: var(--color-text-strong); }

.sg-tab.is-active {
  background: var(--color-surface);
  border-color: rgba(43, 47, 51, 0.07);
  color: var(--color-text-strong);
  box-shadow: 0 1px 2px rgba(43, 47, 51, 0.05);
}
.sg-tab.is-active i { color: var(--color-accent-dark); }

.sg-tab:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(29, 217, 122, 0.18);
}

/* =========================================================
   Панели вкладок
   ========================================================= */

.sg-panel {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.sg-panel.is-active {
  display: flex;
}

.sg-block {
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.06);
  border-radius: var(--radius-lg);
  padding: 28px;
}

@media (max-width: 640px) {
  .sg-block { padding: 20px; }
}

.sg-faq-banner {
  margin-bottom: 20px;
}

/* =========================================================
   Поля формы
   ========================================================= */

.sg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  min-width: 0; /* колонка 1fr не растягивается под самую длинную опцию селекта (Safari 27+) */
}

.sg-field:last-child { margin-bottom: 0; }

.sg-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-strong);
}

.sg-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 700px) {
  .sg-field-row { grid-template-columns: 1fr; }
}

.sg-input,
.sg-select,
.sg-textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--color-bg);
  border: 1.5px solid rgba(43, 47, 51, 0.08);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text-strong);
  outline: none;
  transition: border-color var(--transition-fast);
}

.sg-input:focus,
.sg-select:focus,
.sg-textarea:focus {
  border-color: var(--color-accent);
}

.sg-select {
  cursor: pointer;
}

.sg-textarea {
  height: 70px;
  resize: vertical;
  line-height: 1.6;
}

/* =========================================================
   Динамические строки (крошки, FAQ, sameAs)
   ========================================================= */

.sg-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

.sg-dynamic-row {
  display: grid;
  grid-template-columns: 1fr 1fr 40px;
  gap: 10px;
  align-items: start;
}

/* Строка с одним полем (например, ссылка на соцсеть) — вторая
   колонка не нужна, растягиваем первую на всё доступное место */
#oSameAsRows .sg-dynamic-row {
  grid-template-columns: 1fr 40px;
}

@media (max-width: 700px) {
  .sg-dynamic-row {
    grid-template-columns: 1fr;
  }
  .sg-dynamic-row .robots-rule-remove {
    justify-self: end;
  }
}

.sg-dynamic-input {
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1.5px solid rgba(43, 47, 51, 0.08);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--color-text-strong);
  outline: none;
  transition: border-color var(--transition-fast);
  resize: vertical;
  min-height: 42px;
}

.sg-dynamic-input:focus {
  border-color: var(--color-accent);
}

select.sg-dynamic-input { --select-pad: 12px; height: 42px; } /* как у полей ввода в той же строке */

textarea.sg-dynamic-input {
  min-height: 60px;
}

/* =========================================================
   Предупреждения
   ========================================================= */

.sg-warnings {
  display: none;
  background: rgba(232, 93, 93, 0.06);
  border: 1px solid rgba(232, 93, 93, 0.2);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  /* Явный отступ, а не расчёт только на flex-gap родителя — блок
     появляется из display:none, и такой переход не всегда даёт
     ожидаемый отступ от соседа сверху во всех браузерах одинаково */
  margin-top: 20px;
}

.sg-warnings.is-visible {
  display: block;
}

.sg-warnings ul {
  margin: 0;
  padding-left: 20px;
}

.sg-warnings li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-text);
}

.sg-warnings li + li {
  margin-top: 4px;
}

/* =========================================================
   Вывод готового кода
   ========================================================= */

.sg-output-wrap {
  position: relative;
}

.sg-output {
  width: 100%;
  height: 280px;
  padding: 16px 18px;
  background: var(--color-bg);
  border: 1.5px solid rgba(43, 47, 51, 0.08);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-strong);
  outline: none;
  white-space: pre;
  overflow-x: auto;
  resize: vertical;
  transition: border-color var(--transition-fast);
}

.sg-output:focus {
  border-color: var(--color-accent);
}
.sg-panel[hidden] { display: none !important; }

/* Предупреждение о статусе типа — над формой */
.sg-type-notice { margin-bottom: 0; }

/* Пометка обязательного поля */
.sg-required {
  margin-left: 7px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-muted);
}

/* =========================================================
   Блок вывода
   ========================================================= */

/* Сетка, а не flex: при flex-direction column кнопки с flex:1
   делили высоту контейнера и сплющивались до 24px вместо 44 */
.sg-output-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  margin-bottom: 16px;
  background: var(--color-bg);
  border-radius: var(--radius-md);
}

@media (max-width: 560px) {
  .sg-output-mode { grid-template-columns: minmax(0, 1fr); }
}

.sg-mode-btn {
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.sg-mode-btn:hover { color: var(--color-text-strong); }
.sg-mode-btn.is-active {
  background: var(--color-surface);
  border-color: rgba(43, 47, 51, 0.07);
  color: var(--color-text-strong);
  box-shadow: 0 1px 2px rgba(43, 47, 51, 0.05);
}
.sg-mode-btn:focus-visible {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(29, 217, 122, 0.18);
}

/* Список заполненных типов — быстрый переход между вкладками */
.sg-filled {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.sg-filled-label { font-size: 12.5px; color: var(--color-muted); }

.sg-filled-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  background: var(--color-bg);
  border: 1px solid rgba(43, 47, 51, 0.08);
  border-radius: 999px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-strong);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.sg-filled-chip:hover { border-color: rgba(29, 217, 122, 0.45); color: var(--color-accent-dark); }
.sg-filled-chip i { font-size: 13px; }

.sg-output-hint {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--color-muted);
}

.hta-action-btn.is-danger:hover {
  border-color: rgba(232, 93, 93, 0.35);
  color: #c94747;
  background: rgba(232, 93, 93, 0.06);
}

/* =========================================================
   Валидатор
   ========================================================= */

.sg-validator-input {
  height: 200px;
  white-space: pre-wrap;
  margin-bottom: 16px;
}

.sg-validator-result { margin-bottom: 16px; }
.sg-validator-result[hidden] { display: none !important; }

.sg-verdict {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 14px;
}
.sg-verdict i { font-size: 17px; }
.sg-verdict--ok { background: rgba(29, 217, 122, 0.1); color: var(--color-accent-dark); }
.sg-verdict--warn { background: #FDF3E6; color: #8A5A1B; }
.sg-verdict--bad { background: #FCEBEC; color: #8F1D24; }

.sg-val-group + .sg-val-group { margin-top: 14px; }

.sg-val-group strong {
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
  color: var(--color-text-strong);
}

.sg-val-group ul { margin: 0; padding-left: 20px; }

.sg-val-group li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--color-text);
}
.sg-val-group li + li { margin-top: 4px; }

.sg-val-group--bad li::marker { color: #C1121F; }
.sg-val-group--warn li::marker { color: #B35900; }
.sg-val-group--info li::marker { color: var(--color-accent-dark); }

/* =========================================================
   SEO-БЛОКИ СТРАНИЦЫ
   Белый корпус у таблицы и плашек обязателен: секции лежат
   прямо на фоне страницы, и var(--color-bg) там совпадает
   с фоном — блок превращается в «дыру» без границ.
   ========================================================= */

.sg-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.07);
  border-radius: var(--radius-md);
}
.sg-note i { font-size: 16px; line-height: 23.8px; color: var(--color-accent-dark); flex-shrink: 0; }
.sg-note p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--color-text); }
.sg-note strong { color: var(--color-text-strong); }

/* ---- Таблица типов ---- */
.sg-types-table {
  margin-top: 24px;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.sg-types-head,
.sg-types-row {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 14px 18px;
}

.sg-types-head {
  background: var(--color-text-strong);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}

.sg-types-row {
  border-top: 1px solid rgba(43, 47, 51, 0.06);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--color-muted);
}
.sg-types-row > span:first-child { line-height: 1.9; }

@media (max-width: 820px) {
  .sg-types-head { display: none; }
  .sg-types-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 18px; }
  /* Подпись колонки над значением: без шапки «Где ставить» и
     «Что описывает» иначе не различить */
  .sg-types-row > span[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-text-strong);
    margin-bottom: 2px;
  }
}

/* ---- Список «заголовок + пояснение» ---- */
.sg-deflist { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; }

.sg-deflist-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-top: 1px solid rgba(43, 47, 51, 0.1);
}
.sg-deflist > .sg-deflist-item:first-child { padding-top: 0; border-top: none; }
.sg-deflist > .sg-deflist-item:last-child { padding-bottom: 0; }

/* Белая плашка с волосяной рамкой: фон var(--color-bg) совпал бы
   с фоном страницы и иконка «висела» бы в пустоте. Высота 26px
   равна строке заголовка, поэтому центры совпадают точно */
.sg-deflist-item > i {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--color-surface);
  border: 1px solid rgba(43, 47, 51, 0.1);
  color: var(--color-text-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

/* Контейнер — flex-строка, поэтому растягиваем через flex-grow,
   а не width:100%: иначе 100% считается от всей строки вместе
   с иконкой и даёт горизонтальное переполнение */
.sg-deflist-item > div { flex: 1 1 auto; min-width: 0; }
.sg-deflist-item > div > strong {
  display: block;
  font-size: 15.5px;
  line-height: 26px;
  color: var(--color-text-strong);
  margin-bottom: 6px;
}
.sg-deflist-item p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--color-text); }

/* ---- Шаги ---- */
.sg-steps {
  --sg-step-num-size: 28px;
  list-style: none; margin: 24px 0 0; padding: 0;
  display: flex; flex-direction: column;
}

.sg-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid rgba(43, 47, 51, 0.1);
}
.sg-steps > .sg-step:first-child { padding-top: 0; border-top: none; }
.sg-steps > .sg-step:last-child { padding-bottom: 0; }

/* Размер номера задан переменной, та же величина уходит
   в line-height заголовка — центры совпадают без подгонки */
.sg-step-num {
  flex-shrink: 0;
  width: var(--sg-step-num-size);
  height: var(--sg-step-num-size);
  border-radius: 9px;
  background: var(--color-text-strong);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}

.sg-step-body { flex: 1 1 auto; min-width: 0; }
.sg-step-body h3 { font-size: 16.5px; line-height: var(--sg-step-num-size); margin: 0 0 6px; }
.sg-step-body p { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--color-text); }

@media (max-width: 520px) {
  .sg-steps { --sg-step-num-size: 26px; }
  .sg-step { gap: 14px; }
}

/* Инлайн-код в SEO-блоках: иначе Bootstrap красит его в розовый */

/* =========================================================
   Отступы и поведение кнопок в рабочей области
   ========================================================= */

/* Сноска под блоком стояла в 4px от кнопок — читалась как их часть.
   Отделяем её воздухом и выравниваем иконку по первой строке,
   потому что на узких экранах текст переносится */
.sg-tool .hta-footnote {
  align-items: flex-start;
  gap: 9px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(43, 47, 51, 0.06);
  line-height: 1.6;
}
.sg-tool .hta-footnote i { line-height: 20.8px; flex-shrink: 0; }

/* Ряд действий: кнопки одной высоты, на узких экранах — в колонку
   и на всю ширину, иначе получалась лесенка из разной длины */
.sg-tool .hta-actions-row { gap: 10px; margin-top: 18px; }

.sg-tool .hta-action-btn {
  height: 44px;
  padding: 0 18px;
  justify-content: center;
}

@media (max-width: 620px) {
  .sg-tool .hta-actions-row { flex-direction: column; align-items: stretch; }
  .sg-tool .hta-action-btn { width: 100%; }
}

/* Поле вывода и поле валидатора: подсказка в пустом состоянии */
.sg-output::placeholder { color: var(--color-muted); opacity: 0.8; }