/* Палитра и базовые переменные */
:root {
  --mb-bg: #121212;          /* чуть темнее для контраста */
  --mb-surface: #1b1b1b;
  --mb-border: #2a2a2a;
  --mb-text: #f0f0f0;
  --mb-muted: #b9b9b9;
  --mb-accent: #ffd700;
  --mb-accent-hover: #e6c000;
  --mb-shadow: 0 10px 28px rgba(0,0,0,.35);
  --mb-radius: 12px;
}

/* Контейнер */
.masterbox {
  background: var(--mb-surface);
  color: var(--mb-text);
  padding: 36px 32px;
  border: 1px solid var(--mb-border);
  border-radius: var(--mb-radius);
  box-shadow:0 1px 2px rgba(16,26,39,.05);
  line-height: 1.7;
  font-family: Arial, sans-serif;
}

@media (max-width: 540px) {
  .masterbox { padding: 24px 18px; }
}

/* Заголовки */
.masterbox h1 {
  margin: 0 0 18px;
  font-size: clamp(22px, 2.5vw, 28px);
  color: var(--mb-accent);
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .2px;
}

.masterbox h2 {
  margin: 26px 0 10px;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--mb-accent);
  text-transform: uppercase;
  font-weight: 700;
}

/* Текст */
.masterbox p { margin: 0 0 14px; }
.masterbox p:last-child { margin-bottom: 0; }
.masterbox .muted { color: var(--mb-muted); }

/* Code-чипы */
.masterbox code {
  background: #222;
  color: var(--mb-text);
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid #333;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
}

/* Блок действий */
.masterbox__actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Кнопки */
.mb-btn {
  --_bg: var(--mb-accent);
  --_fg: #1b1b1b;
  --_bd: rgba(0,0,0,.08);

  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 800;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  box-shadow: 0 4px 14px rgba(255,215,0,.25);
  transition: background-color .15s ease, transform .06s ease, box-shadow .2s ease;
  outline: none;
  white-space: nowrap;
}
.mb-btn:hover { background: var(--mb-accent-hover); transform: translateY(-1px); color: #fff2d1; text-decoration: none; }
.mb-btn:active { transform: translateY(0); }
.mb-btn:focus-visible {
  box-shadow:
    0 0 0 3px rgba(255,215,0,.25),
    0 4px 14px rgba(255,215,0,.25);
}

/* Вторичная (outline/ghost) кнопка */
.mb-btn--ghost {
  --_bg: transparent;
  --_fg: var(--mb-accent);
  --_bd: var(--mb-accent);
  box-shadow: none;
}
.mb-btn--ghost:hover { background: rgba(255,215,0,.08); }
.mb-btn--ghost:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,215,0,.25);
}

/* Модификаторы размера (по желанию) */
.mb-btn--sm { padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.mb-btn--lg { padding: 14px 26px; font-size: 1.05rem; }

/* Иконка слева от текста */
.mb-icon {
  display: inline-block;
  height: 1.2em;
  width: auto;
  aspect-ratio: 1/1;
  vertical-align: middle;
  object-fit: contain;
}

/* Небольшой контейнер-ограничитель ширины (опционально) */
.masterbox__wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 10px;
}