/* Оформление «Инспектор» — то же, что у слайдов (slides/style.css): страницы выглядят как код в DevTools.
   @import обязан стоять первым в файле */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;800&family=IBM+Plex+Sans:wght@400;600&display=swap');

:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --text: #1f2328;
  --muted: #6e7781;
  --accent: #881280; /* цвет тегов в панели Elements */
  --mark-bg: #fff3bf; /* подсветка найденного в DevTools */
  --mark-text: #994500;
  --ok: #047857;
  --border: #d8dee4;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

body {
  margin: 0;
  padding: 24px 16px;
}

.wrap {
  max-width: 1100px;
  margin: 0 auto;
}

/* Заголовки — моноширинные; над h1 метка тега, как на слайдах */
h1,
h2 {
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: -0.03em;
  word-spacing: -0.2em;
}

h1 {
  margin-top: 0;
  font-size: 2.25rem;
}

h1::before {
  content: '<h1>';
  display: block;
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0;
}

h2 {
  font-size: 1.5rem;
}

/* Подзаголовок-разделитель выглядит как HTML-комментарий */
h3 {
  margin-bottom: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 500;
  font-variant-ligatures: none;
}

h3::before {
  content: '<!-- ';
}

h3::after {
  content: ' -->';
}

strong,
b {
  padding: 0 4px;
  border-radius: 3px;
  background: var(--mark-bg);
  color: var(--mark-text);
}

code {
  font-family: var(--mono);
}

a {
  color: var(--accent);
}

.muted {
  color: var(--muted);
}

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

form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

input {
  flex: 1 1 200px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
}

button {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font: inherit;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.1);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.message {
  min-height: 1.5em;
}

.message.ok {
  color: var(--ok);
}

.message.error {
  color: var(--accent);
}