@layer components {
  /* Ошибка блока. Тон задаёт цвет акцента: --c и --c-ink */
  .alert { --c: var(--danger); --c-ink: var(--danger-ink); }
  .alert[data-tone="success"] { --c: var(--c-green); --c-ink: var(--c-green-ink); }
  .alert[data-tone="warning"] { --c: var(--c-orange); --c-ink: var(--c-orange-ink); }
  .alert[data-tone="info"] { --c: var(--c-blue); --c-ink: var(--c-blue-ink); }
  .alert[data-tone="danger"] { --c: var(--danger); --c-ink: var(--danger-ink); }

  .alert {
    padding: var(--sp-3) 14px; border-radius: var(--r-m);
    border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
    background: color-mix(in srgb, var(--c) 10%, var(--surface));
    color: var(--c-ink);
    font-size: var(--fs-s); font-weight: var(--fw-medium);
    overflow-wrap: anywhere;
  }

  /* Всплывающее сообщение.
     Popover в top layer виден поверх открытого окна.
     Display не задаём: закрытый popover скрывает браузер.
     Правила для .is-open (запасной вариант без popover) и для
     :popover-open записаны отдельно: старый браузер, не знающий
     :popover-open, иначе отбросил бы всё правило целиком. */
  .toast {
    position: fixed; z-index: 200; inset: auto;
    top: calc(var(--safe-t) + var(--bar-h) + 10px); left: 50%; translate: -50% 0;
    width: max-content; max-width: calc(100% - 32px);
    margin: 0; padding: 12px 20px; border: 0;
    border-radius: var(--r-full);
    background: var(--text); color: var(--bg);
    font-size: var(--fs-s); font-weight: var(--fw-bold); text-align: center;
    box-shadow: var(--sh-2);
    overflow: visible;
  }
  .toast:not([popover]):not(.is-open) { display: none; }
  .toast.is-open { display: block; animation: fade-up .35s var(--spring); }
  .toast:popover-open { display: block; animation: fade-up .35s var(--spring); }

  /* Информационная плашка. Тон задаёт цвет акцента: --c и --c-ink */
  .notice { --c: var(--c-gray); --c-ink: var(--c-gray-ink); }
  .notice[data-tone="blue"] { --c: var(--c-blue); --c-ink: var(--c-blue-ink); }
  .notice[data-tone="green"] { --c: var(--c-green); --c-ink: var(--c-green-ink); }
  .notice[data-tone="orange"] { --c: var(--c-orange); --c-ink: var(--c-orange-ink); }
  .notice[data-tone="purple"] { --c: var(--c-purple); --c-ink: var(--c-purple-ink); }
  .notice[data-tone="warning"] { --c: var(--c-orange); --c-ink: var(--c-orange-ink); }
  .notice[data-tone="danger"] { --c: var(--danger); --c-ink: var(--danger-ink); }
  .notice[data-tone="sky"] { --c: #0EA5E9; --c-ink: #0369A1; }
  .notice[data-tone="pink"] { --c: #EC4899; --c-ink: #BE185D; }
  .notice[data-tone="indigo"] { --c: #6366F1; --c-ink: #4338CA; }

  .notice {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: 14px 16px;
    border-radius: var(--r-l);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    background: color-mix(in srgb, var(--c) 10%, var(--surface));
    color: var(--text);
  }
  .notice__icon { margin-top: 1px; color: var(--c-ink); }
  .notice__body { display: grid; gap: var(--sp-3); min-width: 0; }
  .notice__body p { font-size: var(--fs-s); line-height: 1.5; }
  .notice__body .btn-row { justify-content: flex-start; }
  .notice__body .btn-row > * { flex: 0 1 auto; }

  /* ---------- Промо-блок тарифа ---------- */
  .upsell { --c: var(--c-blue); --c-ink: var(--c-blue-ink); }
  .upsell[data-tone="green"] { --c: var(--c-green); --c-ink: var(--c-green-ink); }
  .upsell[data-tone="violet"] { --c: #8B5CF6; --c-ink: #6D28D9; }

  .upsell {
    display: grid; gap: var(--sp-3); min-width: 0;
    padding: 18px;
    border-radius: var(--r-l);
    border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
    background: color-mix(in srgb, var(--c) 9%, var(--surface));
  }
  .upsell__head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
  .upsell__icon {
    flex: none; display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: var(--r-full);
    background: color-mix(in srgb, var(--c) 16%, transparent);
    color: var(--c-ink);
  }
  .upsell__title {
    margin: 0; font-size: var(--fs-m); font-weight: var(--fw-heavy);
    line-height: 1.3; letter-spacing: -.01em;
  }
  .upsell__body { display: grid; gap: var(--sp-3); min-width: 0; }
  .upsell__text { margin: 0; font-size: var(--fs-s); line-height: 1.55; color: var(--text-2); }
  .upsell__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .upsell__actions > .btn { flex: 0 1 auto; }

  @media (max-width: 420px) {
    .upsell { padding: 16px 14px; gap: 12px; }
    .upsell__head { align-items: flex-start; gap: 10px; }
    .upsell__icon { width: 34px; height: 34px; border-radius: var(--r-s); }
    .upsell__title { font-size: var(--fs-s); }
    .upsell__actions > .btn { flex: 1 1 100%; }
  }
}