/* kurator — дизайн-система для креативів і сайтів.
   Джерело: референси маркетолога-дизайнера (Telegram, 11.10.2026) → reference/.
   Кольори зняті піпеткою з референсів; шрифти — Unbounded 900 (дисплей, логотип) і Manrope (текст).
   Компоненти масштабуються від font-size контейнера (em): креатив 1080×1920 → .k-canvas (font-size 36px),
   сайт → звичайні 16px. Підключення: Google Fonts Unbounded:wght@700;800;900 + Manrope:wght@500;600;700;800. */

:root {
  /* Кольори бренду */
  --k-orange: #FF5A20;        /* головний акцент: бульбашка, кнопки, виділення слів */
  --k-orange-deep: #E8501A;   /* натиснута кнопка, текст-акцент на світлому, коли треба темніше */
  --k-blue: #1F34FF;          /* другий бренд-колір: синій фон, плитки, коло на світлому */
  --k-blue-bright: #3044FF;   /* верх синього градієнта */
  --k-ink: #111111;           /* чорний фон і текст */
  --k-paper: #F5F5F3;         /* світлий фон */
  --k-white: #FFFFFF;
  --k-peach: #F6B8A6;         /* м'який помаранчевий: друге слово на синьому, підкреслення на світлому */
  --k-lavender: #D0D3FF;      /* світло-синій: стовпчики, підкладки на білому */
  --k-stone: #E4E5DF;         /* світло-сірий: стовпчики, межі на світлому */
  --k-graphite: #2A2A2A;      /* картки повідомлень і сповіщень на чорному */
  --k-graphite-2: #333333;    /* межа карток на чорному */
  --k-tg: #17212B;            /* фон відповіді в Telegram (скрін-картка) */
  --k-tg-link: #6AB3F3;       /* посилання/згадка в Telegram */
  --k-tg-icon: #2AABEE;       /* іконка Telegram */
  --k-muted-dark: #9B9B9B;    /* другорядний текст на чорному */
  --k-muted-light: #5E5E5A;   /* другорядний текст на світлому */

  /* Шрифти */
  --k-display: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --k-text: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Радіуси і тіні */
  --k-r-sm: 0.45em;
  --k-r-md: 0.75em;
  --k-r-lg: 1.1em;
  --k-r-pill: 999px;
  --k-shadow-card: 0 0.6em 1.6em rgba(17, 17, 17, 0.10);
  --k-shadow-blue: 0 0.7em 1.8em rgba(10, 20, 140, 0.30);
  --k-glow-orange: 0 0 2.2em rgba(255, 90, 32, 0.45);
}

/* ── Типографіка ───────────────────────────────────────────── */
.k-display { font-family: var(--k-display); font-weight: 900; line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.k-title { font-family: var(--k-display); font-weight: 900; line-height: 1.08; letter-spacing: -0.015em; margin: 0; text-wrap: balance; }
.k-sub { font-family: var(--k-display); font-weight: 800; line-height: 1.15; margin: 0; }
.k-text { font-family: var(--k-text); font-weight: 600; line-height: 1.4; margin: 0; }
.k-orange { color: var(--k-orange); }
.k-peach { color: var(--k-peach); }
.k-blue { color: var(--k-blue); }

/* Підкреслення пензлем під фразою (на цитатах і в заголовках) */
.k-under {
  background-image: linear-gradient(transparent 62%, var(--k-under-c, rgba(255, 90, 32, 0.85)) 62%, var(--k-under-c, rgba(255, 90, 32, 0.85)) 92%, transparent 92%);
  background-repeat: no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 0.08em;
}
.k-under--peach { --k-under-c: rgba(246, 184, 166, 0.85); }
.k-under--thin { background-image: linear-gradient(transparent 78%, var(--k-under-c, var(--k-orange)) 78%, var(--k-under-c, var(--k-orange)) 92%, transparent 92%); }

/* ── Логотип ───────────────────────────────────────────────── */
.k-logo { display: inline-flex; align-items: baseline; font-family: var(--k-display); font-weight: 900; letter-spacing: -0.012em; line-height: 1; color: var(--k-logo-ink, var(--k-ink)); font-size: var(--k-logo-size, 1em); white-space: nowrap; }
.k-logo__o { display: inline-block; width: 0.88em; height: 0.88em; margin: 0 0.02em 0 0.01em; align-self: center; transform: translateY(0.05em); } /* пропорції звірено з креативами дизайнера (11.10) */
.k-logo__o svg { display: block; width: 100%; height: 100%; overflow: visible; }
.k-logo--white { --k-logo-ink: var(--k-white); }
.k-logo--blue { --k-logo-ink: var(--k-blue); }

/* ── Бульбашка (великий символ бренду) ─────────────────────── */
.k-bubble { display: inline-block; width: var(--k-bubble-size, 6em); aspect-ratio: 1; color: var(--k-orange); }
.k-bubble svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* ── Мітки й плашки ────────────────────────────────────────── */
.k-tag { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.35em 0.75em 0.42em; border-radius: var(--k-r-sm); background: var(--k-ink); color: var(--k-white); font-family: var(--k-display); font-weight: 800; line-height: 1.1; transform: rotate(-2deg); box-shadow: 0 0.4em 1em rgba(17,17,17,0.25); }
.k-tag--orange { background: var(--k-orange); color: var(--k-white); }
.k-slab { display: inline-block; padding: 0.18em 0.5em 0.24em; border-radius: var(--k-r-md); background: var(--k-orange); color: var(--k-ink); transform: rotate(-3deg); box-shadow: var(--k-glow-orange); }
.k-tape { position: absolute; width: 2.2em; height: 0.8em; background: rgba(255,255,255,0.75); box-shadow: 0 0.1em 0.3em rgba(0,0,0,0.08); }
.k-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6em; padding: 0.3em 0.6em; border-radius: var(--k-r-pill); background: var(--k-orange); color: var(--k-white); font-family: var(--k-display); font-weight: 900; font-size: 0.9em; }

/* ── Кнопки ────────────────────────────────────────────────── */
/* Кнопка-бульбашка: помаранчева, з «хвостиком», білий кружок із крапками зліва і чорний зі стрілкою справа */
.k-cta { position: relative; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.4em 0.45em 0.4em 0.4em; border-radius: var(--k-r-pill); background: var(--k-orange); color: var(--k-white); font-family: var(--k-display); font-weight: 900; font-size: 1em; line-height: 1; text-decoration: none; border: 0.12em solid rgba(255,255,255,0.18); box-shadow: 0 0.7em 1.6em rgba(255, 90, 32, 0.35); transform: rotate(-2deg); cursor: pointer; }
.k-cta::after { content: ''; position: absolute; left: 0.25em; bottom: -0.55em; width: 1em; height: 1em; background: var(--k-orange); clip-path: polygon(0 100%, 30% 0, 100% 15%); }
.k-cta__dots { display: inline-flex; align-items: center; justify-content: center; gap: 0.12em; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--k-white); flex: none; }
.k-cta__dots i { width: 0.32em; height: 0.32em; border-radius: 50%; background: var(--k-orange); }
.k-cta__dots i:nth-child(2) { opacity: 0.7; } .k-cta__dots i:nth-child(3) { opacity: 0.45; }
.k-cta__label { padding: 0 0.3em; white-space: nowrap; }
.k-cta__arrow { display: inline-flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--k-ink); color: var(--k-white); flex: none; }
.k-cta__arrow svg { width: 0.9em; height: 0.9em; }
.k-cta:hover { background: var(--k-orange-deep); }
.k-cta--flat { transform: none; }

/* Пряма помаранчева кнопка з іконкою Telegram */
.k-btn { display: inline-flex; align-items: center; gap: 0.7em; padding: 0.75em 1.1em; border-radius: var(--k-r-md); background: var(--k-orange); color: var(--k-white); font-family: var(--k-display); font-weight: 800; line-height: 1.2; text-decoration: none; border: 0; box-shadow: var(--k-glow-orange); cursor: pointer; }
.k-btn__ico { display: inline-flex; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--k-white); align-items: center; justify-content: center; flex: none; }
.k-btn__ico svg { width: 1.05em; height: 1.05em; }
.k-btn:hover { background: var(--k-orange-deep); }

/* ── Картки ────────────────────────────────────────────────── */
.k-card { background: var(--k-white); color: var(--k-ink); border-radius: var(--k-r-lg); box-shadow: var(--k-shadow-card); }
.k-list { display: flex; flex-direction: column; gap: 0.5em; }
/* Пункт із номером 01/02/03 і квадратиком-іконкою праворуч */
.k-num { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.8em; padding: 0.85em 1em; background: var(--k-white); color: var(--k-ink); border-radius: var(--k-r-lg); box-shadow: var(--k-shadow-blue); }
.k-num__n { font-family: var(--k-display); font-weight: 900; font-size: 1.6em; color: var(--k-orange); line-height: 1; letter-spacing: -0.02em; min-width: 1.9em; }
.k-num__t { font-family: var(--k-text); font-weight: 700; line-height: 1.25; }
.k-num__i { width: 2em; height: 2em; border-radius: var(--k-r-sm); background: #EEF0FF; color: var(--k-blue); display: inline-flex; align-items: center; justify-content: center; }
.k-num__i svg { width: 1em; height: 1em; }

/* Плашка-пояснення: помаранчевий значок бульбашки + текст на білому */
.k-note { display: flex; align-items: center; gap: 0.9em; padding: 1em 1.2em; background: var(--k-white); color: var(--k-ink); border-radius: var(--k-r-lg); font-family: var(--k-text); font-weight: 700; line-height: 1.3; }
.k-note .k-bubble { --k-bubble-size: 2.6em; flex: none; }

/* Чіпи з галочкою (на чорному) */
.k-chips { display: flex; flex-wrap: wrap; gap: 0.45em; }
.k-chip { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.45em 0.8em 0.45em 0.45em; border-radius: var(--k-r-pill); background: var(--k-graphite); border: 1px solid var(--k-graphite-2); color: var(--k-white); font-family: var(--k-text); font-weight: 700; font-size: 0.9em; }
.k-chip__check { width: 1.4em; height: 1.4em; border-radius: 50%; background: var(--k-orange); color: var(--k-white); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.k-chip__check svg { width: 0.85em; height: 0.85em; }
.k-chip--light { background: #FFE9E0; border-color: transparent; color: var(--k-orange-deep); }

/* Маркер-список (крапка помаранчева) */
.k-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45em; font-family: var(--k-text); font-weight: 600; }
.k-dots li::before { content: '•'; color: var(--k-orange); margin-right: 0.45em; }

/* ── Повідомлення ──────────────────────────────────────────── */
/* Повідомлення учня (темна бульбашка з розмитою аватаркою) */
.k-msg { position: relative; padding: 0.85em 1.1em 0.6em; border-radius: var(--k-r-lg); background: var(--k-graphite); border: 1px solid var(--k-graphite-2); color: #EDEDED; font-family: var(--k-text); font-weight: 500; line-height: 1.35; box-shadow: 0 0.8em 2em rgba(0,0,0,0.35); }
.k-msg__name { width: 4.8em; height: 0.55em; border-radius: var(--k-r-pill); background: rgba(255,255,255,0.18); filter: blur(2px); margin-bottom: 0.45em; }
.k-msg__time { display: block; text-align: right; font-size: 0.72em; color: var(--k-muted-dark); margin-top: 0.2em; }
.k-msg__avatar { position: absolute; left: -1.8em; bottom: 0.2em; width: 1.4em; height: 1.4em; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #8a7aa8, #4e4560); filter: blur(1px); }
.k-msg .k-under { --k-under-c: rgba(255, 90, 32, 0.75); color: var(--k-white); }
.k-msg--light { background: var(--k-ink); border-color: transparent; }

/* Скрін-відповідь бота в Telegram: цитата питання, текст відповіді, мітка-пояснення */
.k-tg { position: relative; padding: 1em 1.15em 1.2em; border-radius: var(--k-r-lg); background: var(--k-tg); color: #E9EEF2; font-family: var(--k-text); font-weight: 500; line-height: 1.38; box-shadow: 0 1em 2.2em rgba(17,17,17,0.35); }
.k-tg__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5em; }
.k-tg__who { display: flex; align-items: center; gap: 0.6em; }
.k-tg__ava { width: 1.6em; height: 1.6em; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #7b8a99, #3d4a57); filter: blur(1.5px); }
.k-tg__name { width: 4.5em; height: 0.5em; border-radius: var(--k-r-pill); background: rgba(255,255,255,0.2); filter: blur(2px); }
.k-tg__time { font-size: 0.72em; color: #7D8B99; }
.k-tg__quote { padding: 0.45em 0.7em; margin-bottom: 0.6em; border-left: 0.18em solid var(--k-orange); border-radius: 0.3em; background: rgba(255,255,255,0.05); font-size: 0.9em; }
.k-tg__quote b { color: var(--k-tg-link); font-weight: 600; }
.k-tg strong { color: var(--k-white); font-weight: 800; }
.k-tg__fade { -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.k-tg__label { position: absolute; right: -0.3em; bottom: -0.9em; }

/* Сповіщення Telegram (стос нічних питань учнів) */
.k-notif { display: grid; grid-template-columns: auto 1fr auto; gap: 0.15em 0.7em; align-items: center; padding: 0.7em 0.9em; border-radius: var(--k-r-md); background: rgba(52, 52, 52, 0.92); border: 1px solid rgba(255,255,255,0.08); color: var(--k-white); font-family: var(--k-text); box-shadow: 0 0.8em 1.8em rgba(0,0,0,0.45); }
.k-notif__ico { grid-row: span 2; width: 1.9em; height: 1.9em; border-radius: 0.45em; background: var(--k-tg-icon); display: inline-flex; align-items: center; justify-content: center; }
.k-notif__ico svg { width: 1.15em; height: 1.15em; }
.k-notif__from { font-size: 0.72em; font-weight: 700; color: #BDBDBD; }
.k-notif__time { font-size: 0.72em; font-weight: 600; color: #BDBDBD; }
.k-notif__text { grid-column: 2 / 4; font-weight: 700; line-height: 1.25; }

/* ── Цифри ─────────────────────────────────────────────────── */
.k-stat { display: flex; flex-direction: column; gap: 0.3em; padding: 1.1em 1.2em 1.2em; border-radius: var(--k-r-lg); }
.k-stat__ico { width: 1.9em; height: 1.9em; border-radius: var(--k-r-sm); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 0.9em; }
.k-stat__ico svg { width: 1.05em; height: 1.05em; }
.k-stat__num { font-family: var(--k-display); font-weight: 900; font-size: 2.6em; line-height: 1; letter-spacing: -0.03em; }
.k-stat__cap { font-family: var(--k-text); font-weight: 700; }
.k-stat--blue { background: var(--k-blue); color: var(--k-white); box-shadow: var(--k-shadow-blue); }
.k-stat--blue .k-stat__ico { background: rgba(255,255,255,0.18); color: var(--k-white); }
.k-stat--ink { background: var(--k-ink); color: var(--k-white); }
.k-stat--ink .k-stat__ico { background: #2B2B2B; color: var(--k-orange); }
.k-stat--ink .k-stat__num { color: var(--k-orange); }
.k-stat--white { background: var(--k-white); color: var(--k-ink); box-shadow: var(--k-shadow-card); }
.k-bars { display: flex; align-items: flex-end; gap: 0.35em; height: 4.2em; }
.k-bars i { width: 0.9em; border-radius: 0.2em; }
.k-bars i:nth-child(1) { height: 32%; background: var(--k-stone); }
.k-bars i:nth-child(2) { height: 52%; background: var(--k-lavender); }
.k-bars i:nth-child(3) { height: 72%; background: var(--k-blue); }
.k-bars i:nth-child(4) { height: 100%; background: var(--k-orange); }

/* ── Наліпки-емоції ────────────────────────────────────────── */
.k-sticker { display: inline-block; width: var(--k-sticker-size, 3em); aspect-ratio: 1; }
.k-sticker svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 0.25em 0.5em rgba(0,0,0,0.35)); }

/* ── Фони ──────────────────────────────────────────────────── */
.k-bg-ink { background: radial-gradient(70% 22% at 50% 104%, rgba(255, 90, 32, 0.55), rgba(255, 90, 32, 0) 70%), var(--k-ink); color: var(--k-white); }
.k-bg-blue { background: radial-gradient(90% 55% at 85% 0%, var(--k-blue-bright), rgba(48, 68, 255, 0) 70%), radial-gradient(70% 40% at 0% 100%, #1726D6, rgba(23, 38, 214, 0) 70%), var(--k-blue); color: var(--k-white); }
.k-bg-paper { background: var(--k-paper); color: var(--k-ink); }
.k-rings { position: absolute; inset: 0; pointer-events: none; background: repeating-radial-gradient(circle at 50% 34%, transparent 0 7.2em, rgba(255,255,255,0.06) 7.2em calc(7.2em + 1px), transparent calc(7.2em + 1px) 9.6em); }

/* ── Полотно креативу 9:16 ─────────────────────────────────── */
.k-canvas { position: relative; width: 1080px; height: 1920px; overflow: hidden; font-size: 36px; font-family: var(--k-text); box-sizing: border-box; }
.k-canvas *, .k-canvas *::before, .k-canvas *::after { box-sizing: border-box; }