/**
 * YooAI Design — быстрые форматы редактора (фронт + TinyMCE).
 * Классы: yoo-design_* (без зависимости от Font Awesome / картинок темы).
 */

:root {
  --yd-fmt-radius: 12px;
  --yd-fmt-radius-sm: 8px;
  --yd-fmt-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
  --yd-fmt-text: #0f172a;
  --yd-fmt-muted: #64748b;
  --yd-fmt-gap: 1.25rem;
}

/* Общие сбросы для форматов */
.yoo-design_note,
.yoo-design_callout,
.yoo-design_attention,
.yoo-design_strip,
.yoo-design_aside,
.yoo-design_mark,
.yoo-design_bignum,
.yoo-design_quote,
.yoo-design_checklist,
.yoo-design_stoplist,
.yoo-design_bonuslist,
.yoo-design_checkcard,
.yoo-design_badge,
.yoo-design_digit,
.yoo-design_new,
.yoo-design_text {
  box-sizing: border-box;
  max-width: 100%;
}

/* ========== Заметки ========== */

.yoo-design_note {
  position: relative;
  display: block;
  margin: var(--yd-fmt-gap) 0 calc(var(--yd-fmt-gap) * 1.25);
  padding: 1.15rem 1.35rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.65;
  color: var(--yd-fmt-text);
  border-radius: var(--yd-fmt-radius);
}

.yoo-design_note--mint {
  /* мягкая мята — светлый шалфей */
  background: linear-gradient(125deg, #e7f6ef 0%, #f2faf6 48%, #e3f3eb 100%);
  color: #0f172a;
}

.yoo-design_note--violet {
  /* Лён — тёплый песок, без градиента */
  background: #ebe6db;
  color: #0f172a;
}

.yoo-design_note--coral {
  /* Чернила — холодный индиго-пыль */
  background: #dde1f0;
  color: #0f172a;
}

.yoo-design_note--slate {
  background: #f1f5f9;
  color: #1e293b;
}

.yoo-design_note--peach {
  /* Глина — терракотовая пыль */
  background: #edd9cc;
  color: #0f172a;
}

.yoo-design_note--rose {
  /* Мох — приглушённый оливковый */
  background: #dde5d8;
  color: #0f172a;
}

.yoo-design_note--card {
  background: #fff;
  padding: 1.75rem 1.85rem;
  border-radius: 1.25rem;
  box-shadow: var(--yd-fmt-shadow);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.yoo-design_note--sky {
  background: linear-gradient(105deg, #e0f2fe 0%, #dbeafe 100%);
  color: #0c4a6e;
}

.yoo-design_note--outline {
  background: #fff;
  border: 1.5px solid transparent;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(96deg, #a7f3d0 0%, #93c5fd 50%, #c4b5fd 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: var(--yd-fmt-shadow);
}

/* Лаванда / Шалфей — мягкая карточка с тонкой рамкой */
.yoo-design_note--lavender,
.yoo-design_note--sage {
  margin: 1.75rem 0 2rem;
  padding: 1rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 14px;
  font-size: 0.95em;
  line-height: 1.85;
}

.yoo-design_note--lavender {
  background: #f5f4fb;
  border-color: #e8e6f2;
  color: #4d4969;
}

.yoo-design_note--lavender a {
  color: #7465ab;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.yoo-design_note--sage {
  background: #eff5f2;
  border-color: #dfebe5;
  color: #566f64;
}

.yoo-design_note--sage a {
  color: #3d6b58;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media screen and (min-width: 1024px) {
  .yoo-design_note {
    padding: 1.35rem 1.75rem;
    font-size: 1.05em;
  }

  .yoo-design_note--card {
    padding: 2.1rem 2.4rem;
    font-size: 1.15em;
  }

  .yoo-design_note--lavender,
  .yoo-design_note--sage {
    padding: 1rem 1.3rem;
    font-size: 0.95em;
  }
}

/* ========== Коллауты (ок / подсказка / ошибка / важно) ========== */
/* Рамка как у Luna .direct-answer: квадрат слева, скругление справа, полоска 3px. */

.yoo-design_callout {
  position: relative;
  margin: var(--yd-fmt-gap) 0;
  padding: 1.35rem 1.35rem 1.35rem 3.15rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.75;
  color: var(--yd-fmt-text);
  border: 1px solid transparent;
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-start-start-radius: 0;
  border-start-end-radius: 18px;
  border-end-end-radius: 18px;
  border-end-start-radius: 0;
}

.yoo-design_callout::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.05rem;
  top: 1.45rem;
  width: 1.2rem;
  height: 1.2rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.yoo-design_callout--ok {
  background: #eff9e8;
  border-color: #d7ebc4;
  border-inline-start-color: #65a30d;
  color: #3d4a32;
}

.yoo-design_callout--ok::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365a30d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* Подсказка — лаванда как на скрине Luna */
.yoo-design_callout--tip {
  background: #f0eff9;
  border-color: #dedfee;
  border-inline-start-color: #a39bd0;
  color: #4d4969;
}

.yoo-design_callout--tip::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f83bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E");
}

.yoo-design_callout--error {
  background: #fef2f2;
  border-color: #f0d4d4;
  border-inline-start-color: #dc2626;
  color: #4a3535;
}

.yoo-design_callout--error::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m15 9-6 6'/%3E%3Cpath d='m9 9 6 6'/%3E%3C/svg%3E");
}

.yoo-design_callout--warn {
  background: #fffbeb;
  border-color: #f0e4c4;
  border-inline-start-color: #d97706;
  color: #4a4030;
}

.yoo-design_callout--warn::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

@media screen and (min-width: 1024px) {
  .yoo-design_callout {
    padding: 1.7rem 1.85rem 1.7rem 3.55rem;
    font-size: 1.05em;
    border-start-end-radius: 20px;
    border-end-end-radius: 20px;
  }

  .yoo-design_callout::before {
    inset-inline-start: 1.25rem;
    top: 1.85rem;
    width: 1.35rem;
    height: 1.35rem;
  }
}

/* ========== Блоки ========== */

.yoo-design_attention {
  margin: 2rem 0;
  padding: 1.5rem 1.35rem;
  border: 3px solid #65a30d;
  border-radius: var(--yd-fmt-radius-sm);
  background: #fff;
  box-shadow: 0 8px 24px rgba(101, 163, 13, 0.18);
  font-size: 1.05em;
  line-height: 1.55;
  color: var(--yd-fmt-text);
}

.yoo-design_attention p {
  margin: 0 0 0.75em;
  font-size: inherit;
  line-height: inherit;
}

.yoo-design_attention p:last-child {
  margin-bottom: 0;
}

@media screen and (min-width: 1024px) {
  .yoo-design_attention {
    padding: 2.4rem 2.75rem;
    border-width: 6px;
    font-size: 1.2em;
    line-height: 1.45;
  }
}

/* ========== Полосы ========== */

.yoo-design_strip {
  display: table;
  margin: 1.25rem 0 0.85rem;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.35;
}

.yoo-design_strip::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.45em;
  vertical-align: -0.05em;
  background-size: contain;
  background-repeat: no-repeat;
}

.yoo-design_strip--ok {
  background: #65a30d;
}

.yoo-design_strip--ok::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

.yoo-design_strip--no {
  background: #dc2626;
}

.yoo-design_strip--no::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}

.yoo-design_strip--blue {
  background: #2563eb;
}

.yoo-design_strip--blue::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
}

/* Цитаты слева / справа — узкие, серая полоса, обтекание */
.yoo-design_aside {
  position: relative;
  color: #475569;
  font-style: italic;
  line-height: 1.55;
  opacity: 0.95;
  font-size: 0.95em;
}

.yoo-design_aside p {
  margin: 0 0 0.6em;
  font-size: inherit;
  font-style: inherit;
}

.yoo-design_aside p:last-child {
  margin-bottom: 0;
}

.yoo-design_aside--left,
.yoo-design_aside--right {
  width: min(42%, 16.5rem);
  max-width: 16.5rem;
  margin-top: 0.15rem;
  margin-bottom: 1rem;
  padding: 0.65rem 1.1rem 0.65rem 1rem;
}

.yoo-design_aside--left {
  float: left;
  clear: left;
  margin-right: 1.15rem;
  margin-left: 0;
  border-left: 3px solid #94a3b8;
  border-right: none;
  text-align: left;
}

.yoo-design_aside--right {
  float: right;
  clear: right;
  margin-left: 1.15rem;
  margin-right: 0;
  border-left: none;
  border-right: 3px solid #94a3b8;
  text-align: right;
}

/* Старый класс без модификатора = слева (совместимость) */
.yoo-design_aside:not(.yoo-design_aside--right):not(.yoo-design_aside--left) {
  float: left;
  clear: left;
  width: min(42%, 16.5rem);
  max-width: 16.5rem;
  margin: 0.15rem 1.15rem 1rem 0;
  padding: 0.65rem 1.1rem 0.65rem 1rem;
  border-left: 3px solid #94a3b8;
  text-align: left;
}

@media screen and (min-width: 1024px) {
  .yoo-design_aside,
  .yoo-design_aside--left,
  .yoo-design_aside--right,
  .yoo-design_aside:not(.yoo-design_aside--right):not(.yoo-design_aside--left) {
    font-size: 1em;
  }

  .yoo-design_aside--left,
  .yoo-design_aside--right,
  .yoo-design_aside:not(.yoo-design_aside--right):not(.yoo-design_aside--left) {
    width: min(40%, 18rem);
    max-width: 18rem;
    padding: 0.75rem 1.25rem 0.75rem 1.1rem;
  }

  .yoo-design_aside--left,
  .yoo-design_aside:not(.yoo-design_aside--right):not(.yoo-design_aside--left) {
    margin-right: 1.5rem;
    border-left-width: 4px;
  }

  .yoo-design_aside--right {
    margin-left: 1.5rem;
    border-right-width: 4px;
  }
}

@media screen and (max-width: 767px) {
  .yoo-design_aside--left,
  .yoo-design_aside--right,
  .yoo-design_aside:not(.yoo-design_aside--right):not(.yoo-design_aside--left) {
    float: none;
    clear: none;
    width: auto;
    max-width: 100%;
    margin: 1.25rem 0;
  }
}

/* Маркер / синяя подсветка */
.yoo-design_mark {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.2em 0.55em;
  color: #1e293b;
  background: #dbeafe;
  border-radius: 6px;
  line-height: 1.55;
  font-weight: 500;
}

/* Крупное число с линиями */
.yoo-design_bignum {
  position: relative;
  margin: 2.5rem 0 2rem;
  padding: 0 12%;
  text-align: center;
  font-size: clamp(2.75rem, 8vw, 4.75rem);
  font-weight: 600;
  line-height: 1;
  color: #e2e8f0;
  letter-spacing: -0.02em;
}

.yoo-design_bignum::before,
.yoo-design_bignum::after {
  content: "";
  position: absolute;
  top: 54%;
  width: 28%;
  height: 1px;
  background: #e2e8f0;
}

.yoo-design_bignum::before {
  left: 4%;
}

.yoo-design_bignum::after {
  right: 4%;
}

/* ========== Цитаты ========== */

.yoo-design_quote {
  max-width: 36rem;
  margin: 1.5rem auto;
  padding: 0.25rem 1.25rem;
  text-align: center;
  font-weight: 600;
  font-size: 1.15em;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: transparent;
  background-image: linear-gradient(
    270deg,
    #2882db,
    #7b71d3 20%,
    #ae5bbb 40%,
    #cf4294 60%,
    #dd3266 80%,
    #d73b35
  );
  -webkit-background-clip: text;
  background-clip: text;
}

.yoo-design_quote--accent {
  color: #334155;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  border-top: 1px solid #94a3b8;
  border-bottom: 1px solid #94a3b8;
  padding: 1.1rem 1.5rem;
  font-style: italic;
  font-weight: 500;
}

.yoo-design_quote--lg {
  font-size: 1.45em;
  line-height: 1.35;
  max-width: 40rem;
}

@media screen and (min-width: 1024px) {
  .yoo-design_quote {
    font-size: 1.45em;
    line-height: 1.35;
    max-width: 32rem;
  }

  .yoo-design_quote--lg {
    font-size: 1.75em;
    max-width: 38rem;
  }
}

/* ========== Списки (чек / стоп / бонус) ========== */

.yoo-design_checklist,
.yoo-design_stoplist,
.yoo-design_bonuslist {
  margin: 1.25rem 0 1.5rem;
  padding: 0.25rem 0 0.25rem 0.15rem;
  color: var(--yd-fmt-text);
}

.yoo-design_checklist ul,
.yoo-design_checklist ol,
.yoo-design_stoplist ul,
.yoo-design_stoplist ol,
.yoo-design_bonuslist ul,
.yoo-design_bonuslist ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yoo-design_checklist li,
.yoo-design_checklist p,
.yoo-design_stoplist li,
.yoo-design_stoplist p,
.yoo-design_bonuslist li,
.yoo-design_bonuslist p {
  position: relative;
  margin: 0 0 0.65em;
  padding-left: 2.15rem;
  line-height: 1.5;
}

.yoo-design_checklist li::before,
.yoo-design_checklist p::before,
.yoo-design_stoplist li::before,
.yoo-design_stoplist p::before,
.yoo-design_bonuslist li::before,
.yoo-design_bonuslist p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
}

.yoo-design_checklist li::before,
.yoo-design_checklist p::before {
  top: 0.08em;
  width: 1.65rem;
  height: 1.65rem;
  background-color: #eff9e8;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2365a30d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 0.95rem;
}

.yoo-design_checklist li,
.yoo-design_checklist p {
  padding-left: 2.45rem;
}

/* Список чек без фона — та же галочка, без заливки кружка */
.yoo-design_checklist--plain li::before,
.yoo-design_checklist--plain p::before {
  background-color: transparent;
}

.yoo-design_stoplist li::before,
.yoo-design_stoplist p::before {
  background-color: #fee2e2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  background-size: 0.8rem;
}

.yoo-design_bonuslist li::before,
.yoo-design_bonuslist p::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='13' rx='2'/%3E%3Cpath d='M12 8v13'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 8c-1.5-2.5-4-3-5.5-1.5S5 10 7 10h5'/%3E%3Cpath d='M12 8c1.5-2.5 4-3 5.5-1.5S19 10 17 10h-5'/%3E%3C/svg%3E"),
    linear-gradient(135deg, #6366f1 0%, #2563eb 55%, #0ea5e9 100%);
  background-size: 0.85rem, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
}

/* Чек-лист на фоне — карточка с тонкой галочкой */
.yoo-design_checkcard {
  margin: 2.35rem 0 2.5rem;
  padding: 1.5rem 1.4rem;
  background: #eff5f2;
  border: 1px solid #dfebe5;
  border-radius: 18px;
  color: #566f64;
  line-height: 1.85;
}

.yoo-design_checkcard ul,
.yoo-design_checkcard ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.yoo-design_checkcard li,
.yoo-design_checkcard > p {
  position: relative;
  margin: 0 0 0.85em;
  padding-inline-start: 1.9rem;
  color: #566f64;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.85;
}

.yoo-design_checkcard li:last-child,
.yoo-design_checkcard > p:last-child {
  margin-bottom: 0;
}

.yoo-design_checkcard li::before,
.yoo-design_checkcard > p::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.38em;
  width: 1.1rem;
  height: 1.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385a696' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Жирный в начале блока = заголовок карточки */
.yoo-design_checkcard > p:first-child:has(strong),
.yoo-design_checkcard > p:first-child:has(b),
.yoo-design_checkcard > h2:first-child,
.yoo-design_checkcard > h3:first-child {
  margin: 0 0 1.15rem;
  padding-inline-start: 0;
  line-height: 1.4;
}

.yoo-design_checkcard > p:first-child:has(strong)::before,
.yoo-design_checkcard > p:first-child:has(b)::before,
.yoo-design_checkcard > h2:first-child::before,
.yoo-design_checkcard > h3:first-child::before {
  content: none;
}

.yoo-design_checkcard > p:first-child strong,
.yoo-design_checkcard > p:first-child b,
.yoo-design_checkcard > strong:first-child,
.yoo-design_checkcard > b:first-child,
.yoo-design_checkcard > h2:first-child,
.yoo-design_checkcard > h3:first-child {
  color: #24263e;
  font-size: 1.55em;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.4;
}

.yoo-design_checkcard > strong:first-child,
.yoo-design_checkcard > b:first-child {
  display: block;
  margin-bottom: 1.15rem;
}

@media screen and (min-width: 1024px) {
  .yoo-design_checkcard {
    padding: 1.85rem 1.9rem;
    border-radius: 21px;
  }

  .yoo-design_checkcard > p:first-child strong,
  .yoo-design_checkcard > p:first-child b,
  .yoo-design_checkcard > strong:first-child,
  .yoo-design_checkcard > b:first-child,
  .yoo-design_checkcard > h2:first-child,
  .yoo-design_checkcard > h3:first-child {
    font-size: 1.8em;
  }
}

/* ========== Бейджи / число / код ========== */

.yoo-design_badge {
  display: inline-block;
  float: left;
  margin: 0.15rem 0.85rem 0.5rem 0;
  padding: 0.2rem 0.7rem;
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  border-radius: 6px;
  text-transform: uppercase;
}

.yoo-design_badge--example {
  background: #84cc16;
}

.yoo-design_badge--new {
  background: #f59e0b;
}

.yoo-design_digit {
  display: inline-block;
  float: left;
  margin: 0 0.65rem 0.35rem 0;
  padding: 0.1rem 0.55rem 0.1rem 0;
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1.2;
  color: #475569;
}

code.yoo-design_code,
.yoo-design_code {
  display: inline;
  vertical-align: baseline;
  padding: 0.12em 0.4em;
  border: 1px solid #e2e8f0;
  border-radius: 5px;
  background: #f8fafc;
  color: #0f172a;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  overflow-wrap: anywhere;
  white-space: break-spaces;
}

/* ========== Приглушённый ========== */

.yoo-design_muted {
  color: var(--yd-fmt-muted) !important;
}

/* ========== Новое ========== */

/* Акцент-линия — сплошной teal (без градиента) */
.yoo-design_new--rail {
  margin: 1.25rem 0;
  padding: 0.85rem 1.15rem 0.85rem 1.25rem;
  border-left: 3px solid #0d9488;
  background: #f0fdfa;
  border-radius: 0 12px 12px 0;
  color: var(--yd-fmt-text);
  line-height: 1.55;
}

.yoo-design_new--dash {
  margin: 1.35rem 0;
  padding: 1.2rem 1.35rem;
  border: 1.5px dashed #94a3b8;
  border-radius: 14px;
  background: #f8fafc;
  color: #334155;
  line-height: 1.55;
}

.yoo-design_new--ink {
  margin: 1.5rem 0;
  padding: 1.35rem 1.45rem;
  border-radius: 14px;
  background: #0f172a;
  color: #e2e8f0;
  line-height: 1.6;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}

.yoo-design_new--meta {
  margin: 0.35rem 0 1.15rem;
  font-size: 0.88em;
  line-height: 1.45;
  color: #64748b;
}

@media screen and (min-width: 1024px) {
  .yoo-design_new--ink {
    padding: 1.65rem 1.85rem;
  }
}

/* Скотч — малярный скотч / washi */
.yoo-design_new--tape {
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin: 1.35rem 0;
  padding: 0.85rem 1.25rem;
  background: rgba(253, 224, 71, 0.45);
  color: #422006;
  line-height: 1.55;
  transform: rotate(-1.2deg);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
}

.yoo-design_new--tape::before,
.yoo-design_new--tape::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    rgba(255, 255, 255, 0.35) 3px,
    rgba(255, 255, 255, 0.35) 5px
  );
  opacity: 0.7;
  pointer-events: none;
}

.yoo-design_new--tape::before {
  left: 0;
}

.yoo-design_new--tape::after {
  right: 0;
}

/* Уголки — рамка из углов */
.yoo-design_new--corners {
  position: relative;
  margin: 1.75rem 0;
  padding: 1.35rem 1.5rem;
  color: var(--yd-fmt-text);
  line-height: 1.6;
  background:
    linear-gradient(#0f172a, #0f172a) 0 0 / 1.4rem 2px no-repeat,
    linear-gradient(#0f172a, #0f172a) 0 0 / 2px 1.4rem no-repeat,
    linear-gradient(#0f172a, #0f172a) 100% 0 / 1.4rem 2px no-repeat,
    linear-gradient(#0f172a, #0f172a) 100% 0 / 2px 1.4rem no-repeat,
    linear-gradient(#0f172a, #0f172a) 0 100% / 1.4rem 2px no-repeat,
    linear-gradient(#0f172a, #0f172a) 0 100% / 2px 1.4rem no-repeat,
    linear-gradient(#0f172a, #0f172a) 100% 100% / 1.4rem 2px no-repeat,
    linear-gradient(#0f172a, #0f172a) 100% 100% / 2px 1.4rem no-repeat;
}

/* Облачко — speech bubble */
.yoo-design_new--bubble {
  position: relative;
  margin: 1.5rem 0 2rem;
  padding: 1.15rem 1.35rem;
  border-radius: 18px;
  background: #f1f5f9;
  color: #1e293b;
  line-height: 1.55;
}

.yoo-design_new--bubble::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  bottom: -0.65rem;
  width: 1.1rem;
  height: 1.1rem;
  background: #f1f5f9;
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}

/* Диагональ — белый центр, полосатая рамка, по центру */
.yoo-design_new--diag {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: block;
  max-width: 34rem;
  margin: 2rem auto;
  padding: 2rem 2.25rem;
  text-align: center;
  font-size: 1.08em;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.55;
  color: #0f172a;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.yoo-design_new--diag::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 20px;
  background-color: #eef2ff;
  background-image: repeating-linear-gradient(
    -18deg,
    transparent,
    transparent 9px,
    rgba(99, 102, 241, 0.14) 9px,
    rgba(99, 102, 241, 0.14) 18px
  );
  pointer-events: none;
}

/* Штамп */
.yoo-design_new--stamp {
  display: inline-block;
  max-width: 100%;
  margin: 1.25rem 0;
  padding: 0.55rem 1rem;
  border: 3px double #be123c;
  border-radius: 6px;
  color: #9f1239;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.92em;
  line-height: 1.35;
  transform: rotate(-3deg);
  opacity: 0.9;
}

/* Скобки */
.yoo-design_new--brackets {
  position: relative;
  margin: 1.5rem auto;
  max-width: 36rem;
  padding: 0.85rem 2rem;
  text-align: center;
  color: #334155;
  font-style: italic;
  line-height: 1.5;
}

.yoo-design_new--brackets::before,
.yoo-design_new--brackets::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.4em;
  font-style: normal;
  font-weight: 300;
  line-height: 1;
  color: #94a3b8;
  pointer-events: none;
}

.yoo-design_new--brackets::before {
  content: "[";
  left: 0.15rem;
}

.yoo-design_new--brackets::after {
  content: "]";
  right: 0.15rem;
}

@media screen and (min-width: 1024px) {
  .yoo-design_new--corners,
  .yoo-design_new--bubble {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .yoo-design_new--diag {
    max-width: 38rem;
    padding: 2.35rem 2.75rem;
    font-size: 1.15em;
  }

  .yoo-design_new--diag::before {
    inset: -16px;
  }
}

/* Редакционный — тонкие линии, по центру */
.yoo-design_new--editorial {
  max-width: 32rem;
  margin: 2rem auto;
  padding: 1.35rem 0.5rem;
  text-align: center;
  color: #1e293b;
  font-size: 1.08em;
  line-height: 1.55;
  letter-spacing: -0.01em;
  border-top: 1px solid #0f172a;
  border-bottom: 1px solid #0f172a;
}

/* Буквица */
.yoo-design_new--dropcap {
  margin: 1.35rem 0;
  color: #0f172a;
  line-height: 1.65;
}

.yoo-design_new--dropcap::first-letter {
  float: left;
  margin: 0.1em 0.15em 0 0;
  padding: 0.05em 0.12em;
  font-size: 3.1em;
  font-weight: 700;
  line-height: 0.85;
  color: #0f172a;
  background: linear-gradient(145deg, #ccfbf1, #e0f2fe);
  border-radius: 8px;
}

@media screen and (min-width: 1024px) {
  .yoo-design_new--editorial {
    font-size: 1.18em;
    padding: 1.55rem 0.75rem;
  }

  .yoo-design_new--dropcap::first-letter {
    font-size: 3.4em;
  }
}

/* ========== Текст (inline) ========== */

span.yoo-design_text--marker,
.yoo-design_text--marker {
  display: inline;
  padding: 0.05em 0.2em;
  background: linear-gradient(transparent 55%, #fef08a 55%);
  color: inherit;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

span.yoo-design_text--grad,
.yoo-design_text--grad {
  display: inline;
  font-weight: 700;
  color: transparent;
  background-image: linear-gradient(90deg, #2563eb, #7c3aed, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
}

span.yoo-design_text--uline,
.yoo-design_text--uline {
  display: inline;
  background-image: linear-gradient(90deg, #22d3ee, #6366f1);
  background-size: 100% 0.18em;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 0.08em;
  font-weight: 600;
}

span.yoo-design_text--outline,
.yoo-design_text--outline {
  display: inline-block;
  vertical-align: middle;
  padding: 0.12em 0.55em;
  border: 1.5px solid #94a3b8;
  border-radius: 8px;
  color: #334155;
  font-size: 0.88em;
  font-weight: 600;
  line-height: 1.35;
}