/* Тема modavio: токены и базовые компоненты (кнопки, поля, метки, окна). Цвета и шрифт — из макета
   «Modavio Landing.html». Акцент — фиолетовый #7F3AA1 владельца, оттенки и градиент — гамма
   «ДНК» из референса владельца (MyDNA Landing, от светлого пурпурного #FAD0FA до фиолетового): светлый фон, Manrope (templates/includes/fonts.html).
   Цвета в site.css берутся только отсюда, чтобы тему можно было поменять в одном месте. */

:root {
  --color-bg: #FAF8FB;
  --color-surface: #FFFFFF;
  --color-soft: #F4F1F6;        /* подложки строк, ячеек, калькулятора */
  --color-faint: #ECE6F0;       /* «серые» скелетоны старых окон */
  --color-text: #1F1A23;
  --color-text-soft: #443B4B;   /* основной текст абзацев */
  --color-muted: #655A6E;       /* подписи */
  --color-disabled: #B3A8BB;
  --color-border: #E5DCEB;
  --color-border-dashed: #D3C6DD;

  --color-accent: #7F3AA1;      /* кнопки, ссылки, иконки */
  --color-accent-dark: #5E2479; /* наведение, тёмные плашки, логотип */
  --color-accent-pink: #C291D4; /* середина гаммы: логотип, точки, метки */
  --color-tint: #F6EAFB;        /* выбранное: фон метки, строки, модуля */
  --color-tint-2: #ECD7F5;
  --color-on-accent: #FAF8FB;
  --color-tooltip: #3F1856;     /* подсказки модулей */
  --color-tooltip-accent: #E6BEF3;
  /* Градиент «ДНК»: только для декора (финальная карточка, свечения), текст на нём не ставим —
     светлый конец не держит контраст с белым */
  --gradient-dna: linear-gradient(120deg, #FAD0FA 0%, #D8A5D8 28%, #B782C9 52%, #9B63CF 76%, #7F3AA1 100%);

  --font-body: "Manrope", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-sm: 0 12px 30px -20px rgba(94, 36, 121, .3);
  --shadow-md: 0 10px 30px -12px rgba(94, 36, 121, .25);
  --shadow-lg: 0 20px 50px -30px rgba(94, 36, 121, .35);
  --shadow-dialog: 0 30px 80px -30px rgba(31, 26, 35, .5);
  --backdrop: rgba(31, 26, 35, .45);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.55; font-weight: 500; letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 8px; font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; }
p { margin: 0 0 8px; }
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-dark); }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption { font-size: 12px; margin-top: 6px; color: var(--color-muted); }
button { font: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: var(--color-tint-2); }

/* — кнопки — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 9px 16px; cursor: pointer; text-decoration: none;
  font: inherit; font-weight: 700; font-size: 14.5px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  transition: background .2s, color .2s, border-color .2s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-dark); color: var(--color-on-accent); }
.btn-secondary { border-color: var(--color-accent); color: var(--color-accent); }
.btn-secondary:hover { background: var(--color-tint); color: var(--color-accent); }
.btn-ghost { color: var(--color-accent); }
.btn-ghost:hover { background: var(--color-tint); color: var(--color-accent); }
.btn-light { background: var(--color-on-accent); color: var(--color-accent-dark); }
.btn-light:hover { background: var(--color-tint); color: var(--color-accent-dark); }
.btn-icon { width: 40px; height: 40px; min-height: 0; padding: 0; border-color: var(--color-border); font-size: 18px; color: var(--color-text); }
.btn-icon:hover { background: var(--color-soft); color: var(--color-text); }
.btn-block { width: 100%; }

/* — поля — */
.field > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.input {
  width: 100%; min-height: 42px; padding: 10px 12px; font: inherit; font-weight: 500; font-size: 15px;
  color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
}
.input:hover { border-color: var(--color-border-dashed); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 100px; resize: vertical; }

/* — метки — */
.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.tag-accent { background: var(--color-tint); color: var(--color-accent-dark); border-radius: 6px; padding: 3px 8px; }
.tag-neutral { background: var(--color-soft); color: var(--color-text); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — окно — */
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: 14px; padding: 24px;
  border-radius: var(--radius-xl); background: var(--color-bg); box-shadow: var(--shadow-dialog);
}
.dialog-title { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.dialog-body { font-size: 14px; color: var(--color-muted); }