/*
  Базовые стили для 3des.ru
  Задача: простой, читаемый, production-friendly вид без внешних библиотек.
*/

:root {
  color-scheme: light dark;

  --bg: #f7f7f8;
  --panel: #ffffff;
  --text: #111111;
  --muted: #555555;
  --border: #cccccc;
  --error: #b00020;
  --ok: #1a7f37;
  --json-key: #0550ae;
  --json-string: #116329;
  --json-number: #953800;
  --json-boolean: #cf222e;
  --json-null: #8250df;
}

/* Тёмная тема, если браузер/система использует тёмную тему */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111111;
    --panel: #1b1b1b;
    --text: #eeeeee;
    --muted: #aaaaaa;
    --border: #444444;
    --error: #ff6b6b;
    --ok: #58d68b;
	--json-key: #79c0ff;
    --json-string: #7ee787;
    --json-number: #ffa657;
    --json-boolean: #ff7b72;
    --json-null: #d2a8ff;

  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
}

.site-header {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 16px 8px;
}

.site-header h1 {
  margin: 0 0 8px;
  font-size: 2rem;
}

.site-header p {
  margin: 0;
  color: var(--muted);
}

.tools {
  display: grid;
  gap: 16px;
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 16px;
}

.tool {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.tool h2 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 1.2rem;
}

label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
}

textarea,
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
}

textarea {
  min-height: 160px;
  resize: vertical;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

button {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

button:hover {
  border-color: currentColor;
}

button:active {
  transform: translateY(1px);
}

pre {
  margin: 0;
  padding: 10px;
  min-height: 24px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
}

.error {
  margin: 8px 0;
  color: var(--error);
  min-height: 1.2em;
}

.site-footer {
  max-width: 920px;
  margin: 0 auto;
  padding: 8px 16px 36px;
  color: var(--muted);
}

/* ============================================================
   Дополнительные стили для навигации и контентных разделов
   ============================================================ */

html {
  scroll-behavior: smooth;
}

section[id] {
  scroll-margin-top: 16px;
}

/* Ссылка "перейти к содержимому" для клавиатурной навигации */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--panel);
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  text-decoration: none;
  z-index: 10;
}

.skip-link:focus {
  top: 8px;
}

/* Навигация в шапке */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.site-nav a {
  color: inherit;
  text-decoration: none;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  border-color: var(--border);
}

.site-nav a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Общие секции */
.section {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 16px 24px;
}

.section-title {
  margin: 0 0 16px;
  font-size: 1.35rem;
}

/*
  Блок инструментов уже имеет собственные отступы.
  Внутри секции делаем его без лишних внешних отступов.
*/
.tools {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Карточки для текстовых разделов */
.content-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.content-card p {
  margin-top: 0;
}

.content-card ul,
.content-card ol {
  margin: 0;
  padding-left: 20px;
}

.content-card li {
  margin: 6px 0;
}

/* ============================================================
   Стили для блока копирования результата
   ============================================================ */

.copy-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.copy-status {
  margin: 0;
  color: var(--muted);
  min-height: 1.2em;
}

.copy-status-error {
  color: var(--error);
}
/* ============================================================
   Стили для URL select, number input и чекбоксов
   ============================================================ */

input[type="number"],
select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: inherit;
  font: inherit;
}

.checkbox-grid {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--text);
}

.checkbox-label input[type="checkbox"] {
  width: auto;
}
/* ============================================================
   Две колонки инструментов на широких экранах
   ============================================================ */

/*
  Важно: minmax(0, 1fr) помогает избежать переполнения,
  если внутри карточки будет длинная строка или пароль.
*/
@media (min-width: 900px) {
  .tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /*
    Если какой-то инструмент нужно растянуть на обе колонки,
    ему можно добавить класс tool-wide.
  */
  .tool-wide {
    grid-column: 1 / -1;
  }
}
#base64-input {
  min-height: 20px;
}
/* ============================================================
   Ровная сетка карточек
   ============================================================ */

/*
  Карточки в одной строке растягиваются до одинаковой высоты.
*/
.tools {
  align-items: stretch;
}

/*
  Карточка становится flex-колонкой.
  Это позволяет прижать кнопку копирования к низу.
*/
.tool {
  display: flex;
  flex-direction: column;
}

/*
  Область вывода растягивается и заполняет свободное место.
  Благодаря этому карточки выглядят ровными.
*/
.tool pre {
  flex-grow: 1;
}

/*
  Кнопка копирования всегда прижата к низу карточки.
  padding-top даёт гарантированный отступ сверху.
*/
.tool .copy-controls {
  margin-top: auto;
  padding-top: 12px;
}

/* Описание инструмента, например, в Base64 */
.tool-description {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.92rem;
}

/* ============================================================
   Лёгкая визуальная полировка
   ============================================================ */

/* Мягкая тень у карточек */
.tool,
.content-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Навигация в виде аккуратных "пилюль" */
.site-nav a {
  background: var(--panel);
  border: 1px solid var(--border);
}
/* ============================================================
   Два поля в одну строку
   ============================================================ */

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* На совсем узких экранах возвращаем поля в столбик */
@media (max-width: 480px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}
/* ============================================================
   Компактный режим для широких карточек
   ============================================================ */

/*
  Широким карточкам (tool-wide) не нужно растягивание вывода
  и прижатие кнопки к низу: они и так занимают всю строку.
  Возвращаем обычный поток, чтобы элементы стояли плотно.
*/
.tool-wide {
  display: block;
}

/* Возвращаем обычный отступ сверху у блока копирования */
.tool-wide .copy-controls {
  margin-top: 8px;
}
/* ============================================================
   Убираем пустое место, когда сообщений нет
   ============================================================ */

/*
  :empty срабатывает, только если внутри тега действительно
  ничего нет (даже пробелов). В нашем HTML ошибки и статусы
  записаны как <p ...></p>, поэтому правило работает.
*/
.error:empty {
  margin: 0;
  min-height: 0;
}

.copy-status:empty {
  min-height: 0;
}

/* ============================================================
   Подзаголовок внутри карточки (для блока проверки IP)
   ============================================================ */

.tool-subtitle {
  margin: 20px 0 12px;
  padding-top: 16px;
  border-top: 1px dashed var(--border);
  font-size: 1.05rem;
}
/* ============================================================
   Подсветка результата проверки IP
   ============================================================ */

.result-ok {
  color: var(--ok);
  font-weight: 600;
}

.result-bad {
  color: var(--error);
  font-weight: 600;
}
/* ============================================================
   Сворачиваемая шпаргалка по маскам
   ============================================================ */

.cidr-cheatsheet {
  margin-top: 20px;
}

.cidr-cheatsheet summary {
  cursor: pointer;
  color: var(--muted);
  padding: 6px 0;
}

.cidr-cheatsheet summary:hover {
  color: var(--text);
}

.cheatsheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px;
  margin-top: 10px;
}

.cheatsheet-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  color: var(--muted);
}

.cheatsheet-item strong {
  color: var(--text);
  font-weight: 600;
}
/* ============================================================
   Выравнивание высоты полей и селектов
   ============================================================ */

input[type="number"],
select {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95rem;
  line-height: normal;
}
/* ============================================================
   Cron parser
   ============================================================ */

#cron-input {
  max-width: 340px;
}

/* Пока плиток нет, блок не занимает место */
.cron-fields:empty {
  display: none;
}

.cron-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

@media (max-width: 900px) {
  .cron-fields {
    grid-template-columns: 1fr;
  }
}

.cron-field {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 0.85rem;
}

.cron-field-title {
  font-weight: 600;
}

.cron-field-range,
.cron-field-desc {
  color: var(--muted);
}

.cron-field-value {
  margin: 4px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
/* ============================================================
   Липкая навигация
   ============================================================ */

/*
  Обёртка липнет к верху экрана.
  Фон обязателен, иначе контент будет просвечивать сквозь навигацию.
*/
.nav-sticky {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Центрируем пилюли внутри липкой полосы */
.site-nav {
  max-width: 920px;
  margin: 0 auto;
  padding: 10px 16px;
}

/*
  Учитываем высоту липкой навигации,
  чтобы карточки не прятались под неё при переходе по якорям.
*/
section[id] {
  scroll-margin-top: 70px;
}

/* Skip-link должен быть выше липкой навигации */
.skip-link {
  z-index: 30;
}

/* ============================================================
   Кнопка "наверх"
   ============================================================ */

.to-top {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 20;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--panel);
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}

/* Показываем кнопку только после прокрутки */
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
}
/* ============================================================
   Подсветка синтаксиса JSON
   ============================================================ */

.json-key {
  color: var(--json-key);
}

.json-string {
  color: var(--json-string);
}

.json-number {
  color: var(--json-number);
}

.json-boolean {
  color: var(--json-boolean);
  font-weight: 600;
}

.json-null {
  color: var(--json-null);
  font-style: italic;
}