Техническое задание для оформления отчётов MOTIVERIKON

⛔ ПЕРВОЕ ПРАВИЛО — КРИТИЧНО

Блок 0 уже полностью написан ниже в секции «БЛОК 0». Это ЕДИНСТВЕННО допустимый CSS.

ЗАПРЕЩЕНО:

• ❌ Писать свой <style> «по описанию»
• ❌ Переименовывать классы
• ❌ Использовать классы .mv-root, .mv-cover, .mv-section, .mv-h, .mv-p, .mv-key, .mv-tech-k, .mv-tech-v, .mv-status, .mv-num, .mv-quote, .mv-list — их нет в эталоне
• ❌ Использовать шрифты Georgia, Times New Roman, Courier New
• ❌ Использовать цвета #fafaf7, #fbfaf4, #f3efe3, #c4b88a, #8a7a4a, #2a2418, #5a5040 и любые другие бежевые/кремовые/коричневые
• ❌ Использовать text-align: justify, border: 1px solid, рамки, светлый фон
• ❌ Менять что-либо в CSS Блока 0 — ни пробела, ни точки

РАЗРЕШЕНО:

• ✅ Только Ctrl+C → Ctrl+V кода из секции «БЛОК 0» ниже
• ✅ Использовать ТОЛЬКО классы с префиксом .mv-h1, .mv-h1-*, .mv-hd, .mv-hd-*, .mv-sec, .mv-sec-*, .mv-tech, .mv-tech-*

???? КОНТРОЛЬНАЯ ПРОВЕРКА ПЕРЕД ВЫДАЧЕЙ БЛОКА 0

Перед тем как отправить Блок 0, ассистент обязан проверить в своём черновике:

1. Есть ли в коде background:#0f0f1a — должно быть минимум 4 раза
2. Есть ли font-family:var(--mv-font,'Inter',sans-serif) — должно быть
3. Есть ли color:#e2e0ff — должно быть
4. Есть ли классы .mv-root, .mv-cover, .mv-key — их НЕ должно быть
5. Есть ли цвета #c4b88a, #8a7a4a, #fafaf7 — их НЕ должно быть
6. Есть ли Georgia, Courier — их НЕ должно быть

Если хоть одна проверка провалилась — не выдавать, начать заново с копирования.

---

Визуальная концепция (тёмная тема)

Это тёмная тема с фиолетово-золотыми акцентами, а не книжное бежевое оформление. Любая попытка сделать «серьёзный книжный стиль» — нарушение ТЗ.

• Фон: #0f0f1a (глубокий тёмно-синий)
• Основной текст: #e2e0ff (светло-лиловый)
• Вторичный: #a0a0b6
• Приглушённый: #706f80
• Акцент фиолетовый: #a78bfa
• Акцент золотой: #d4af37
• Градиент: linear-gradient(135deg,#a78bfa,#d4af37)
• Шрифт: Inter, sans-serif
• Контейнер: max-width:1170px; padding:0 40px
• Контент: max-width:800px
• Все свойства с !important

---

БЛОК 0 — ЕДИНЫЙ <style> (выдаётся дословной копией)

html

<style>
.mv-h1{position:relative!important;max-width:var(--mv-w,1170px)!important;margin:0 auto!important;padding:0 40px!important;font-family:var(--mv-font,'Inter',sans-serif)!important;background:#0f0f1a!important;}
.mv-h1-entry{position:relative!important;max-width:800px!important;margin:0 auto!important;padding:44px 0 48px!important;}
.mv-h1-date{display:flex!important;align-items:center!important;gap:12px!important;margin:0 0 10px!important;padding:0!important;}
.mv-h1-date-dot{width:8px!important;height:8px!important;border-radius:50%!important;background:linear-gradient(135deg,#a78bfa,#d4af37)!important;opacity:.5!important;flex-shrink:0!important;}
.mv-h1-date-text{font-size:.78em!important;font-weight:600!important;letter-spacing:.18em!important;line-height:1.3!important;text-transform:uppercase!important;color:#a78bfa!important;margin:0!important;padding:0!important;}
.mv-h1-date-moon{font-size:.72em!important;font-weight:400!important;letter-spacing:.12em!important;line-height:1.3!important;color:#a0a0b6!important;margin:0!important;padding:0!important;}
.mv-h1-links{display:flex!important;flex-wrap:wrap!important;gap:6px 16px!important;margin:0 0 20px!important;padding:0!important;}
.mv-h1-links a{font-size:.76em!important;font-weight:600!important;letter-spacing:.08em!important;line-height:1.3!important;color:#d4af37!important;text-decoration:none!important;border-bottom:1px solid rgba(212,175,55,.25)!important;transition:border-color .2s!important;}
.mv-h1-links a:hover{border-color:#d4af37!important;}
.mv-h1-label{font-size:.68em!important;font-weight:700!important;letter-spacing:.22em!important;line-height:1.3!important;text-transform:uppercase!important;color:#a0a0b6!important;margin:0 0 8px!important;padding:0!important;}
.mv-h1-event{font-size:1em!important;font-weight:400!important;line-height:1.65!important;color:#e2e0ff!important;margin:0 0 28px!important;padding:0!important;}
.mv-h1-note-label{font-size:.68em!important;font-weight:700!important;letter-spacing:.22em!important;line-height:1.3!important;text-transform:uppercase!important;color:#706f80!important;margin:0 0 8px!important;padding:0!important;}
.mv-h1-note{font-size:.92em!important;font-weight:400!important;line-height:1.6!important;color:#a0a0b6!important;margin:0!important;padding:16px 0 0!important;border-top:1px solid rgba(212,175,55,.06)!important;}
.mv-h1-num{font-size:.64em!important;font-weight:700!important;letter-spacing:.22em!important;line-height:1.3!important;text-transform:uppercase!important;color:#706f80!important;margin:0 0 16px!important;padding:0!important;}
.mv-h1-num span{background:linear-gradient(135deg,#a78bfa,#d4af37)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;font-weight:800!important;}
.mv-hd{position:relative!important;max-width:var(--mv-w,1170px)!important;margin:0 auto!important;padding:4px 40px!important;background:#0f0f1a!important;}
.mv-hd-inner{max-width:800px!important;margin:0 auto!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important;}
.mv-hd-line{flex:1!important;height:1px!important;background:linear-gradient(90deg,transparent 0%,rgba(167,139,250,.45) 30%,rgba(212,175,55,.45) 70%,transparent 100%)!important;}
.mv-hd-dots{display:flex!important;align-items:center!important;gap:6px!important;flex-shrink:0!important;}
.mv-hd-dot{width:3px!important;height:3px!important;border-radius:50%!important;background:#a78bfa!important;opacity:.6!important;}
.mv-hd-dot-center{width:5px!important;height:5px!important;border-radius:50%!important;background:linear-gradient(135deg,#a78bfa,#d4af37)!important;opacity:.8!important;}
.mv-sec{position:relative!important;max-width:var(--mv-w,1170px)!important;margin:0 auto!important;padding:0 40px!important;font-family:var(--mv-font,'Inter',sans-serif)!important;background:#0f0f1a!important;}
.mv-sec-inner{max-width:800px!important;margin:0 auto!important;padding:40px 0 44px!important;}
.mv-sec-num{font-size:.68em!important;font-weight:700!important;letter-spacing:.22em!important;line-height:1.3!important;text-transform:uppercase!important;color:#706f80!important;margin:0 0 10px!important;padding:0!important;}
.mv-sec-num span{background:linear-gradient(135deg,#a78bfa,#d4af37)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;font-weight:800!important;}
.mv-sec-title{font-size:1.7em!important;font-weight:700!important;line-height:1.25!important;letter-spacing:-.005em!important;color:#e2e0ff!important;margin:0 0 24px!important;padding:0!important;}
.mv-sec-title span{background:linear-gradient(135deg,#a78bfa,#d4af37)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;}
.mv-sec-underline{width:56px!important;height:2px!important;background:linear-gradient(90deg,#a78bfa,#d4af37)!important;margin:0 0 28px!important;padding:0!important;border-radius:2px!important;}
.mv-sec p{font-size:1em!important;font-weight:400!important;line-height:1.75!important;color:#c8c6dc!important;margin:0 0 18px!important;padding:0!important;}
.mv-sec p:last-child{margin-bottom:0!important;}
.mv-sec strong{color:#e2e0ff!important;font-weight:700!important;}
.mv-sec em{color:#d4af37!important;font-style:italic!important;font-weight:500!important;}
.mv-sec-quote{position:relative!important;margin:24px 0!important;padding:18px 22px 18px 26px!important;border-left:3px solid transparent!important;border-image:linear-gradient(180deg,#a78bfa,#d4af37) 1!important;background:rgba(167,139,250,.05)!important;border-radius:0 6px 6px 0!important;font-size:1em!important;font-style:italic!important;line-height:1.7!important;color:#e2e0ff!important;}
.mv-sec-list{margin:0 0 18px!important;padding:0 0 0 4px!important;list-style:none!important;}
.mv-sec-list li{position:relative!important;padding:0 0 10px 22px!important;font-size:1em!important;line-height:1.7!important;color:#c8c6dc!important;}
.mv-sec-list li:before{content:''!important;position:absolute!important;left:0!important;top:12px!important;width:6px!important;height:6px!important;border-radius:50%!important;background:linear-gradient(135deg,#a78bfa,#d4af37)!important;opacity:.7!important;}
.mv-tech{position:relative!important;max-width:var(--mv-w,1170px)!important;margin:0 auto!important;padding:0 40px 48px!important;font-family:var(--mv-font,'Inter',sans-serif)!important;background:#0f0f1a!important;}
.mv-tech-inner{max-width:800px!important;margin:0 auto!important;padding:28px 0 0!important;border-top:1px solid rgba(212,175,55,.1)!important;}
.mv-tech-label{font-size:.68em!important;font-weight:700!important;letter-spacing:.22em!important;line-height:1.3!important;text-transform:uppercase!important;color:#706f80!important;margin:0 0 12px!important;padding:0!important;}
.mv-tech-row{display:flex!important;flex-wrap:wrap!important;gap:6px 14px!important;margin:0 0 8px!important;padding:0!important;font-size:.86em!important;line-height:1.6!important;color:#a0a0b6!important;}
.mv-tech-row b{color:#d4af37!important;font-weight:600!important;margin-right:6px!important;}
.mv-tech-sign{margin:16px 0 0!important;padding:0!important;font-size:.82em!important;line-height:1.5!important;color:#706f80!important;font-style:italic!important;}
@media(max-width:700px){
.mv-h1{padding:0 16px!important}
.mv-h1-entry{padding:32px 0 36px!important}
.mv-h1-date{flex-wrap:wrap!important;gap:6px 12px!important}
.mv-h1-date-text{font-size:.72em!important}
.mv-h1-date-moon{font-size:.68em!important}
.mv-h1-event{font-size:.95em!important}
.mv-h1-note{font-size:.88em!important}
.mv-hd{padding:4px 16px!important}
.mv-sec{padding:0 16px!important}
.mv-sec-inner{padding:32px 0 36px!important}
.mv-sec-title{font-size:1.4em!important}
.mv-tech{padding:0 16px 36px!important}
}
</style>

---

БЛОК 1 — Обложка + разделитель

html

<div class="mv-h1">
  <div class="mv-h1-entry" style="text-align:center!important;">
    <div class="mv-h1-date" style="justify-content:center!important;">
      <span class="mv-h1-date-dot"></span>
      <span class="mv-h1-date-text">{{НАДЗАГОЛОВОК}}</span>
      <span class="mv-h1-date-dot"></span>
    </div>
    <p class="mv-h1-num" style="text-align:center!important;"><span>MOTIVERIKON</span> · {{ТИП ДОКУМЕНТА}}</p>
    <h1 style="font-size:2.6em!important;font-weight:800!important;line-height:1.15!important;letter-spacing:-.01em!important;color:#e2e0ff!important;margin:0 0 20px!important;padding:0!important;">
      {{ЗАГОЛОВОК}} <span style="background:linear-gradient(135deg,#a78bfa,#d4af37)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important;">{{КЛЮЧЕВОЕ СЛОВО}}</span>
    </h1>
    <p style="font-size:1.15em!important;font-weight:400!important;font-style:italic!important;line-height:1.5!important;color:#a78bfa!important;margin:0 0 24px!important;padding:0!important;">
      {{ПОДЗАГОЛОВОК}}
    </p>
    <p style="font-size:.98em!important;font-weight:400!important;line-height:1.65!important;color:#a0a0b6!important;max-width:560px!important;margin:0 auto!important;padding:0!important;">
      {{ОПИСАНИЕ/ЭТАП}}
    </p>
  </div>
</div>
<div class="mv-hd">
  <div class="mv-hd-inner">
    <span class="mv-hd-line"></span>
    <span class="mv-hd-dots">
      <span class="mv-hd-dot"></span>
      <span class="mv-hd-dot-center"></span>
      <span class="mv-hd-dot"></span>
    </span>
    <span class="mv-hd-line"></span>
  </div>
</div>

---

БЛОКИ РАЗДЕЛОВ (1–3 раздела за сообщение)

html

<div class="mv-sec">
  <div class="mv-sec-inner">
    <div class="mv-sec-num"><span>Раздел {{NN}}</span></div>
    <h2 class="mv-sec-title">{{ЗАГОЛОВОК РАЗДЕЛА}}</h2>
    <div class="mv-sec-underline"></div>
    <p>…текст…</p>
    <div class="mv-sec-quote">«…цитата…»</div>
    <p>…текст…</p>
  </div>
</div>
<div class="mv-hd">
  <div class="mv-hd-inner">
    <span class="mv-hd-line"></span>
    <span class="mv-hd-dots">
      <span class="mv-hd-dot"></span>
      <span class="mv-hd-dot-center"></span>
      <span class="mv-hd-dot"></span>
    </span>
    <span class="mv-hd-line"></span>
  </div>
</div>

Между разделами всегда .mv-hd. После последнего раздела — тоже.

---

ФИНАЛЬНЫЙ ТЕХНИЧЕСКИЙ БЛОК

html

<div class="mv-tech">
  <div class="mv-tech-inner">
    <div class="mv-tech-label">Техническая информация</div>
    <div class="mv-tech-row"><b>Статус:</b> {{статус}}</div>
    <div class="mv-tech-row"><b>Дата фиксации:</b> {{дата}}</div>
    <div class="mv-tech-row"><b>Автор:</b> Сергей Колост</div>
    <div class="mv-tech-row"><b>Система:</b> MOTIVERIKON</div>
    <p class="mv-tech-sign">Документ системы MOTIVERIKON · внутренняя фиксация наблюдения</p>
  </div>
</div>

---

Правила форматирования текста

1. Каждый абзац → <p> внутри .mv-sec-inner
2. Ключевые термины → <strong> (светло-лиловый)
3. Иностранные слова и интонационные акценты (у-вэй, дао, искони, испокон) → <em> (золотой курсив)
4. Прямые цитаты → <div class="mv-sec-quote">
5. Списки → <ul class="mv-sec-list"><li>…</li></ul>
6. В <h2 class="mv-sec-title"> ключевое слово — в <span> для градиента
7. Номера разделов: 01, 02, 03…

---

Порядок работы ассистента

1. Автор присылает текст отчёта
2. Ассистент копирует Блок 0 дословно из секции выше (с контрольной проверкой) → ждёт «дальше»
3. Выдаёт Блок 1 (обложка + .mv-hd) → ждёт «дальше»
4. Разделы по 1–3 за сообщение, каждый + .mv-hd → ждёт «дальше»
5. Финальный технический блок

---

Что запрещено ассистенту

❌ Сочинять свой CSS, даже если текст отчёта «по духу просит» книжного стиля ❌ Писать «у меня нет эталона, пришлите его» — эталон в секции «БЛОК 0» выше ❌ Оборачивать HTML-блоки в внешние <div> с фоном/шириной ❌ Пропускать .mv-hd между разделами ❌ Менять цвета, шрифты, размеры

---

Что нужно от автора

Только текст отчёта: заголовок, надзаголовок, пронумерованные разделы. Всё остальное — по этому ТЗ.