/* шрифты Gemini: Google Sans Text — весь текст (кнопки, поля, подписи), Google Sans — заголовки */
:root {
  --font-text: "Google Sans Text", "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Google Sans", "Google Sans Text", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* ================= Цвета и размеры ================= */
/* Основная тема — тёмная черно-фиолетовая, как главная страница; светлая включается кнопкой «Тема».
   accent — цвет текста, иконок и рамок (светлый, чтобы читался на тёмном);
   primary — заливка кнопок и сообщений учителя (насыщенный фиолетовый, на нём белый текст). */
:root {
  --bg: #000000;
  --bg-image: none;
  /* фон рабочей области: чёрный, по центру — светло-фиолетовый размытый луч, будто свет падает сверху */
  --main-glow: radial-gradient(ellipse 16% 75% at 50% -5%, rgba(187, 247, 208, .26), rgba(74, 222, 128, .1) 45%, transparent 75%),
               radial-gradient(ellipse 45% 55% at 50% 42%, rgba(34, 197, 94, .16), transparent 70%);
  --surface: #17112A;
  --surface-2: #211A3A;
  /* фон блоков (карточки тарифов, «Помощь», FAQ, заявки…): фиолетовый градиент сайта вместо чёрного */
  --block-bg: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(34, 197, 94, .2), transparent 70%), linear-gradient(180deg, #1D1536, #120D24);
  --field-bg: rgba(33, 26, 58, .7);  /* поля ввода — мягкий фиолетовый вместо чёрного */
  --border: #2E2550;
  --text: #EEEAF8;
  --muted: #9D94BA;
  --accent: #4ADE80;
  --logo-green: #46C055;  /* «AI» в названии UaqytAI — зелёный из логотипа (static/brand), в обеих темах */
  --accent-hover: #86EFAC;
  --accent-soft: #2A1F4D;
  --primary: linear-gradient(135deg, #16A34A, #22C55E);
  --primary-hover: linear-gradient(135deg, #15803D, #16A34A);
  --on-accent: #FFFFFF;
  --sidebar: rgba(15, 11, 30, .72);            /* полупрозрачная тёмно-фиолетовая, сквозь неё чуть виден градиент */
  --hover-glass: rgba(255, 255, 255, .045);    /* почти прозрачная плашка при наведении на кнопки панели */
  --gold: #F2B705;
  --danger: #F87171;
  --radius: 14px;
  --shadow: 0 8px 30px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

/* Светлая яркая тема — основная с 31.10.2026 (учителя просили яркие цвета); data-theme="light" стоит в <html>
   index.html, login.html и admin.html. Тёмные правила выше остались для главной страницы сайта */
:root[data-theme="light"] {
  --bg: #FFFFFF;
  --bg-image: none;
  --main-glow: radial-gradient(ellipse 40% 45% at 15% 0%, rgba(99, 102, 241, .14), transparent 70%),
               radial-gradient(ellipse 35% 40% at 85% 5%, rgba(236, 72, 153, .12), transparent 70%),
               radial-gradient(ellipse 45% 40% at 50% 100%, rgba(20, 184, 166, .1), transparent 70%);
  --surface: #FFFFFF;
  --surface-2: #EEF1FF;
  --block-bg: linear-gradient(180deg, #FFFFFF, #F7F5FF);
  --field-bg: #FFFFFF;
  --border: #E1E5F5;
  --text: #111827;
  --muted: #586174;
  --accent: #15803D;
  --accent-hover: #166534;
  --accent-soft: #DCFCE7;
  --primary: linear-gradient(135deg, #22A55B, #15803D);
  --primary-hover: linear-gradient(135deg, #15803D, #166534);
  --sidebar: rgba(255, 255, 255, .86);
  --hover-glass: rgba(22, 163, 74, .07);
  --danger: #DC2626;
  --shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 6px 20px rgba(22, 163, 74, .08);
  color-scheme: light;
}

/* ================= Переход с главной страницы ================= */
/* Chrome и Safari сами плавно сменяют страницы одного сайта; остальные браузеры — просто открывают */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ================= Появление при открытии платформы ================= */
/* Элементы по очереди проявляются и всплывают «волной»: слева меню, справа содержимое раздела.
   Класс .appear ставится в <head> до отрисовки и снимается через ~1.5 с (app.js) —
   поэтому анимация только при открытии, а не при каждом переключении разделов. */
.appear .sidebar .brand, .appear .sidebar-toggle, .appear .nav-item, .appear .chat-list,
.appear .user, .appear .view-chat .view-head, .appear .chat-empty > :not(.suggestions), .appear .suggestion,
.appear .messages, .appear .composer, .appear .view.active:not(.view-chat) > * {
  animation: rise .6s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms + 80ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
.appear .nav-item:nth-child(1) { --i: 1; }
.appear .nav-item:nth-child(2) { --i: 2; }
.appear .nav-item:nth-child(3) { --i: 3; }
.appear .nav-item:nth-child(4) { --i: 4; }
.appear .nav-item:nth-child(5) { --i: 5; }
.appear .nav-item:nth-child(6) { --i: 6; }
.appear .nav-item:nth-child(7) { --i: 7; }
.appear .nav-item:nth-child(8) { --i: 8; }
.appear .chat-list { --i: 9; }
.appear .user { --i: 10; }
.appear .view-chat .view-head, .appear .view.active > :nth-child(1) { --i: 1; }
.appear .chat-empty > :nth-child(1), .appear .view.active > :nth-child(2) { --i: 2; }
.appear .chat-empty > :nth-child(2), .appear .messages, .appear .view.active > :nth-child(3) { --i: 3; }
.appear .view.active > :nth-child(4) { --i: 4; }
.appear .suggestion:nth-child(1), .appear .view.active > :nth-child(5) { --i: 5; }
.appear .suggestion:nth-child(2) { --i: 6; }
.appear .suggestion:nth-child(3) { --i: 7; }
.appear .suggestion:nth-child(4) { --i: 8; }
.appear .composer { --i: 9; }
@media (prefers-reduced-motion: reduce) {
  .appear .sidebar .brand, .appear .sidebar-toggle, .appear .nav-item, .appear .chat-list,
  .appear .user, .appear .view-chat .view-head, .appear .chat-empty > *, .appear .suggestion,
  .appear .messages, .appear .composer, .appear .view.active > * { animation: none; }
}

/* ================= Кнопка «свернуть / развернуть боковую панель» ================= */
/* без рамки, только иконка; при наведении — маленькая размытая «стеклянная» плашка.
   Панель открыта — кнопка в её правом верхнем углу; свёрнута — рядом с логотипом UaqytAI, на его высоте */
.sidebar-toggle {
  position: fixed; z-index: 30; top: 24px; left: 184px;
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--muted);
  transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), color .15s, background-color .2s;
}
.sidebar-toggle:hover {
  background-color: var(--hover-glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sidebar-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sidebar-toggle svg { width: 18px; height: 18px; stroke-width: 1.6; }
.sidebar-toggle .chev { transform-origin: 14.5px 12px; transition: transform .35s; }
.sidebar-closed .sidebar-toggle .chev { transform: rotate(180deg); }  /* стрелка «развернуть» */

/* Свёрнутая панель — узкая колонка: логотип, кнопка, иконки разделов, «Новый чат», язык и профиль.
   Ширина меняется плавно, подписи гаснут; на телефоне панель — нижнее меню, там это не нужно */
@media (min-width: 761px) {
  .sidebar { overflow: hidden; transition: width .35s cubic-bezier(.2, .8, .2, 1); }
  .brand, .user { transition: padding .35s cubic-bezier(.2, .8, .2, 1), margin .35s cubic-bezier(.2, .8, .2, 1); }
  .brand-name, .nav-item span, .chat-items, .user-info, .user .icon-btn { transition: opacity .2s; }
  .new-chat span {
    display: inline-block; max-width: 140px; overflow: hidden;
    transition: max-width .35s cubic-bezier(.2, .8, .2, 1), opacity .2s;
  }
  .new-chat { transition: gap .35s, padding .35s, background .15s; }

  .sidebar-closed .sidebar { width: 72px; }  /* иконки (12 + 20 + 12) по центру колонки */
  .sidebar-closed .sidebar-toggle { top: 24px; left: 78px; }  /* сразу справа от знака UaqytAI (просьба владельца) */
  .sidebar-closed .brand { padding: 4px 6px; }  /* знак 32 px по центру колонки */
  .sidebar-closed :is(.brand-name, .nav-item span, .new-chat span, .user-info, .user .icon-btn) {
    opacity: 0; pointer-events: none;
  }
  .sidebar-closed .new-chat { gap: 0; padding-left: 0; padding-right: 0; }
  .sidebar-closed .new-chat span { max-width: 0; }
  .sidebar-closed .chat-items { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
  .sidebar-closed .user { padding-left: 5px; }
}

/* ================= Основа ================= */
* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--bg); }  /* без белой вспышки при переходе с главной */
body {
  margin: 0;
  background: var(--bg-image), var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font: 15px/1.55 var(--font-text);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, .brand-name, .kpi-value, .plan-price b { font-family: var(--font-display); }
button { cursor: pointer; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
h1 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 26px; margin: 0 0 4px; letter-spacing: -.02em; }
.muted { color: var(--muted); margin: 2px 0 0; }
[hidden] { display: none !important; }

.app { display: flex; height: 100vh; }

/* ================= Боковое меню ================= */
.sidebar {
  width: 232px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 20px 14px;
  background: var(--sidebar); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 6px; padding: 4px 8px; color: inherit; text-decoration: none; }
.logo { display: grid; place-items: center; flex-shrink: 0; }
/* логотип — знак UaqytAI картинкой (static/brand, с тройным запасом — чётко и на телефоне) */
.logo img { width: 36px; height: 36px; display: block; }
.brand-name { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.brand-name b { color: var(--logo-green); font-weight: 700; }
/* UaqytAI College (/college): школьные элементы скрыты, колледжные видны — и наоборот (data-edu ставит <head>) */
html[data-edu="school"] .college-only, html[data-edu="college"] .school-only { display: none !important; }
.brand-college {
  margin-left: 6px; padding: 2px 7px; border-radius: 6px; vertical-align: 2px; background: rgba(70, 192, 85, .14);
  color: var(--logo-green); font: 600 11px/1.3 var(--font-display); letter-spacing: .02em;
}

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); font-weight: 500; text-align: left;
  transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: var(--accent-soft); color: var(--accent); }

/* язык интерфейса — Рус / Қаз / Eng, во вкладке «Настройки».
   Сегментный переключатель — как вкладки разделов: тонкая рамка, выбранный язык — спокойная плашка;
   подписи — как в Gemini: Google Sans, средняя жирность, обычный регистр, без разрядки */
.lang-switch {
  flex: 1; display: flex; gap: 2px; padding: 3px;
  border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, .03);
}
.lang-switch button {
  flex: 1; padding: 5px 0; border: 0; border-radius: 7px; background: transparent;
  color: var(--muted); font-size: 13px; font-weight: 500; transition: color .15s, background .15s;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lang-switch button.active {
  background: var(--surface-2); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
:root[data-theme="light"] .lang-switch { background: var(--surface-2); }
:root[data-theme="light"] .lang-switch button.active {
  background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 1px 1px rgba(15, 23, 42, .04);
}

/* ================= Основная область ================= */
.main { flex: 1; min-width: 0; overflow: hidden; position: relative; isolation: isolate; }
/* луч — по центру рабочей области; при открытии платформы плавно «включается» сверху вниз */
.main::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--main-glow); transform-origin: 50% 0;
}
.appear .main::before { animation: beam-in 1.3s cubic-bezier(.2, .8, .2, 1) .1s both; }
@keyframes beam-in { from { opacity: 0; transform: scaleY(.3); } }
@media (prefers-reduced-motion: reduce) { .appear .main::before { animation: none; } }

.view { display: none; height: 100%; overflow-y: auto; padding: 28px 40px 40px; }
.view.active { display: block; }
.view > * { max-width: 920px; margin-left: auto; margin-right: auto; }
.view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ================= Кнопки и поля ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
  font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, opacity .15s;
}
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--primary); color: var(--on-accent); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.primary:disabled { opacity: .55; cursor: progress; }
.btn.ghost { background: transparent; border-color: var(--border); color: var(--text); }
.btn.ghost:hover { background: var(--surface-2); }

.form { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
textarea, select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); resize: vertical; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-row { display: flex; gap: 20px; flex-wrap: wrap; }
.field { min-width: 110px; }
.field.grow { flex: 1; }

/* галерея шаблонов презентаций */
.templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.template-card {
  display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 8px;
  border: 2px solid transparent; border-radius: 14px; background: none; font-size: 14px; font-weight: 600;
  transition: border-color .15s, background .15s;
}
.template-card:hover { background: var(--accent-soft); }
.template-card.active { border-color: var(--accent); background: var(--accent-soft); }
.template-card .mini { pointer-events: none; }
.deck-theme { width: auto; padding: 9px 12px; background: var(--surface); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--muted); font-size: 13px;
}
.chip:hover { color: var(--accent); border-color: var(--accent); }

/* ================= Чат ================= */
.view-chat.active { display: flex; flex-direction: column; padding-bottom: 20px; }
.view-chat > * { width: 100%; }
.chat-scroll { flex: 1; overflow-y: auto; padding: 4px 2px 20px; }
/* новый чат — как в Gemini: приветствие градиентом, под ним поле запроса, ниже подсказки «таблетками» */
.chat-empty { text-align: center; padding: 8vh 0 0; }
.chat-empty .hello { margin: 0; font: 400 40px/1.15 var(--font-display); letter-spacing: -.03em; color: #FFFFFF; }  /* белым, без градиента — так решил пользователь */
.chat-empty .hello-sub { margin: 6px 0 0; font: 400 22px/1.3 var(--font-display); color: var(--muted); letter-spacing: -.01em; }
.suggestions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.suggestion {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text);
  font: 500 14px/1.2 var(--font-display); transition: background .15s, border-color .15s;
}
.suggestion svg { width: 18px; height: 18px; color: var(--accent); }
.suggestion b { font-weight: 500; }
.suggestion:hover { background: var(--hover-glass); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.suggestion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* подсказки — только в пустом чате; подпись «может ошибаться» — только в разговоре (как в Gemini) */
.chat-main:has(#chatEmpty[hidden]) .suggestions, .chat-main:has(#chatEmpty:not([hidden])) .chat-note { display: none; }
.chat-note { margin: 10px 0 0; text-align: center; font-size: 12px; color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.messages { display: flex; flex-direction: column; gap: 18px; }
.msg { display: flex; gap: 12px; }
.msg.user { justify-content: flex-end; }
.msg.user .bubble {
  background: var(--primary); color: var(--on-accent); padding: 10px 16px;
  border-radius: 16px 16px 4px 16px; max-width: 75%; white-space: pre-wrap;
}
.msg.assistant .avatar {
  position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft);
  display: grid; place-items: center; flex-shrink: 0; margin-top: 2px;
}
.msg.assistant .avatar img { position: relative; width: 22px; height: 22px; display: block; }
.msg.assistant .bubble { flex: 1; min-width: 0; padding-top: 4px; }

/* загрузка — как в Gemini: пока ИИ думает, вокруг значка крутится градиентное кольцо, а на месте ответа
   переливаются три полосы; как только пошёл текст — полосы исчезают, кольцо крутится до конца ответа */
.avatar-ring {
  position: absolute; inset: -3px; border-radius: 50%; opacity: 0; transition: opacity .3s;
  background: conic-gradient(from 0deg, #4ADE80, #4ADE80, #4ADE80, #4ADE80);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
}
.msg.thinking .avatar-ring, .msg.streaming .avatar-ring { opacity: 1; animation: ring-spin 1.1s linear infinite; }
.msg.thinking .avatar img { animation: ai-pulse 1.6s ease-in-out infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
@keyframes ai-pulse { 50% { transform: scale(.82); opacity: .75; } }
.ai-loader { display: none; flex-direction: column; gap: 10px; padding-top: 8px; max-width: 620px; }
/* в чате вместо полос — маленькая надпись «UaqytAI думает…», по которой пробегает блик (как «Thinking» в Gemini) */
.ai-status {
  display: none; margin-top: 7px; font: 500 14px/1.3 var(--font-display);
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 38%, #BBF7D0 50%, var(--muted) 62%, var(--muted) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: text-shimmer 1.8s linear infinite;
}
.msg.thinking .ai-status { display: inline-block; }
@keyframes text-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.msg.thinking .bubble, .msg.thinking .msg-actions, .msg.streaming .msg-actions { display: none; }
.ai-loader i {
  display: block; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(74, 222, 128, .14) 0%, rgba(240, 171, 252, .5) 25%, rgba(134, 239, 172, .32) 50%,
    rgba(74, 222, 128, .14) 75%, rgba(74, 222, 128, .14) 100%);
  background-size: 300% 100%; animation: ai-shimmer 2s linear infinite;
}
.ai-loader i:nth-child(2) { width: 88%; animation-delay: .12s; }
.ai-loader i:nth-child(3) { width: 58%; animation-delay: .24s; }
@keyframes ai-shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

/* оформление Markdown в ответах */
.bubble h1, .bubble h2, .bubble h3 { font-size: 17px; margin: 18px 0 8px; letter-spacing: -.01em; }
.bubble p { margin: 0 0 10px; }
.bubble ul, .bubble ol { margin: 0 0 10px; padding-left: 22px; }
.bubble li { margin: 3px 0; }
.bubble table { border-collapse: collapse; margin: 10px 0; font-size: 14px; display: block; overflow-x: auto; }
.bubble th, .bubble td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.bubble th { background: var(--surface-2); }
.bubble code {
  background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: 13px;
  font-family: "Google Sans Code", ui-monospace, Consolas, monospace;  /* кириллицу в коде покажет Consolas */
}
.bubble pre { background: var(--surface-2); padding: 12px; border-radius: 10px; overflow-x: auto; }
.bubble pre code { background: none; padding: 0; }
.msg-actions { margin-top: 6px; }
.msg-actions button { border: 0; background: none; color: var(--muted); font-size: 13px; padding: 4px 6px; border-radius: 6px; }
.msg-actions button:hover { background: var(--surface-2); color: var(--text); }

/* поле запроса — как в Gemini: большое скруглённое, сверху текст, снизу инструменты и «Отправить» */
.composer {
  display: flex; flex-direction: column; gap: 6px; padding: 16px 12px 10px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 30px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38); transition: border-color .2s, box-shadow .2s;
}
.composer:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 10px 34px rgba(0, 0, 0, .38), 0 0 0 4px rgba(34, 197, 94, .12);
}
.composer textarea {
  border: 0; background: transparent; padding: 4px 10px 4px 0; resize: none; min-height: 30px; max-height: 240px;
  box-shadow: none; font-size: 16px; line-height: 1.55;
}
.composer textarea:focus { box-shadow: none; }
.composer textarea::placeholder { color: var(--muted); }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-left: -10px; }
.composer-tools { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.tool-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font: 500 13.5px/1 var(--font-display); transition: background .15s, color .15s;
}
.tool-chip svg { width: 18px; height: 18px; }
.tool-chip:hover { background: var(--hover-glass); color: var(--text); }
.tool-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* «Отправить»: круглая; без текста — тихая, с текстом — фиолетовая */
.send {
  width: 40px; height: 40px; border-radius: 50%; border: 0; flex-shrink: 0; display: grid; place-items: center;
  background: transparent; color: var(--muted); transition: background .2s, color .2s, transform .15s;
}
.send svg { width: 20px; height: 20px; stroke-width: 2.2; }
.composer.has-text .send { background: var(--primary); color: var(--on-accent); }
.composer.has-text .send:hover:not(:disabled) { transform: scale(1.05); }
.send:disabled { opacity: .45; cursor: default; }

/* ================= Результаты ================= */
.result { margin-top: 24px; }
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.result-head h2 { font-size: 20px; }
.loading { display: flex; align-items: center; gap: 14px; padding: 22px; color: var(--muted); }
.spinner {
  width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--accent-soft);
  border-top-color: var(--accent); animation: spin .8s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.error { padding: 16px 18px; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }

/* мини-слайды */
.slide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.mini {
  aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; position: relative;
  background: var(--s-bg); color: var(--s-text); border: 1px solid var(--border);
  padding: 7% 7% 0; font-size: 9px; line-height: 1.35; container-type: inline-size;
}
.mini .num { position: absolute; right: 6%; bottom: 5%; color: var(--s-muted); font-size: 8px; }
.mini .bar { width: 9%; height: 3px; background: var(--s-accent); margin-bottom: 5%; border-radius: 2px; }
.mini h4 { margin: 0 0 6%; font-size: clamp(10px, 5.4cqi, 16px); line-height: 1.2; }
.mini ul, .mini ol { margin: 0; padding-left: 12px; font-size: clamp(8px, 3.4cqi, 11px); }
.mini li::marker { color: var(--s-accent); }
.mini.title { padding-left: 10%; display: flex; flex-direction: column; justify-content: center; border-left: 6px solid var(--s-accent); }
.mini.title h4 { font-size: clamp(13px, 7.5cqi, 22px); }
.mini.title p, .mini.section p { color: var(--s-muted); margin: 0; font-size: clamp(8px, 3.6cqi, 12px); }
.mini.section { background: var(--s-accent); color: var(--s-on, #fff); display: flex; flex-direction: column; justify-content: center; }
.mini.section p { color: var(--s-on, #fff); opacity: .85; }
.mini .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6%; }
.mini .col { background: var(--s-soft); border-radius: 6px; padding: 6%; }
.mini .col b { display: block; margin-bottom: 4%; font-size: clamp(8px, 3.4cqi, 11px); }
.mini .col ul { font-size: clamp(7px, 2.8cqi, 9px); }
.mini .label-up { color: var(--s-accent); font-weight: 700; text-transform: uppercase; font-size: clamp(7px, 2.8cqi, 9px); }
.mini .fact { font-size: clamp(18px, 13cqi, 40px); font-weight: 700; margin: 3% 0; }
.mini .caption { color: var(--s-muted); font-size: clamp(7px, 3cqi, 10px); }
.mini.quote { background: var(--s-soft); display: flex; flex-direction: column; justify-content: center; }
.mini.quote blockquote { margin: 0; font-style: italic; font-size: clamp(9px, 4.4cqi, 14px); }
.mini.quote cite { color: var(--s-muted); font-style: normal; font-weight: 600; margin-top: 5%; font-size: clamp(7px, 3cqi, 10px); }
.mini .soft-box { background: var(--s-soft); border-radius: 6px; padding: 5% 6%; }

/* предпросмотр таблицы */
.summary { margin: -6px 0 16px; color: var(--muted); }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.tab { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 13px; }
.tab.active { background: var(--primary); border-color: var(--accent); color: var(--on-accent); }
.table-wrap { overflow: auto; max-height: 520px; }
.table-wrap table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.table-wrap th {
  position: sticky; top: 0; background: var(--surface); color: var(--text); font-weight: 700;
  padding: 9px 12px; text-align: center; white-space: nowrap; border: 1px solid var(--text);
}
.table-wrap td { padding: 8px 12px; border: 1px solid var(--text); white-space: nowrap; color: var(--text); background: var(--surface); }
.table-wrap tr.total td { font-weight: 700; }
.table-wrap table { border-collapse: collapse; }
.formula { font-family: "Google Sans Code", ui-monospace, Consolas, monospace; font-size: 12px; color: var(--accent); }

/* история */
.history { display: flex; flex-direction: column; gap: 10px; }
.history-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.history-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.history-item .info { flex: 1; min-width: 0; }
.history-item .title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item .date { color: var(--muted); font-size: 13px; }
.empty { text-align: center; color: var(--muted); padding: 48px 0; }

/* уведомление — snackbar как в Gemini: светлая плашка с тёмным текстом слева внизу, выезжает снизу.
   Внутри открытого окна (toast() в app.js) — у его нижнего края */
.toast {
  position: fixed; left: 24px; bottom: 24px; z-index: 1000; max-width: min(480px, calc(100% - 48px)); min-width: 220px;
  padding: 14px 16px; border-radius: 8px; background: #E3E3E3; color: #1F1F1F;
  font: 400 14px/20px var(--font-text); box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  animation: snack-in .22s cubic-bezier(.2, .8, .2, 1);
}
dialog .toast { position: absolute; }
.toast.out { opacity: 0; translate: 0 8px; transition: opacity .18s, translate .18s; }
@keyframes snack-in { from { opacity: 0; translate: 0 16px; } }
@media (max-width: 760px) { .toast { left: 12px; right: 12px; bottom: 84px; max-width: none; } dialog .toast { bottom: 16px; } }

/* ================= Телефон ================= */
@media (max-width: 760px) {
  .app { flex-direction: column-reverse; }
  .sidebar {
    width: 100%; flex-direction: row; padding: 6px 8px; gap: 0;
    border-right: 0; border-top: 1px solid var(--border);
  }
  .brand { display: none; }
  .nav { flex-direction: row; flex: 1; justify-content: space-around; }
  .nav-item { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 4px; flex: 1; align-items: center; }
  .main { flex: 1; min-height: 0; }
  .view { padding: 18px 16px 24px; }
  .chat-empty { padding-top: 3vh; }
  .chat-empty .hello { font-size: 30px; }
  .chat-empty .hello-sub { font-size: 18px; }
  .tool-chip span { display: none; }  /* на телефоне у инструментов — только значки */
  .composer { padding: 12px 10px 8px 18px; border-radius: 26px; }
  .msg.user .bubble { max-width: 88%; }
  #newChat span { display: none; }
  #newChat { padding: 9px; }
  .history-item { flex-wrap: wrap; }
  .history-item .info { flex-basis: calc(100% - 60px); }
}

/* ===== мини-слайды: фото и новые типы ===== */
.mini .mini-photo { position: absolute; object-fit: cover; }
.mini.title.has-photo, .mini.section.has-photo { padding-right: 52%; }
.mini.title.has-photo .mini-photo { top: 0; right: 0; width: 47%; height: 100%; border-left: 3px solid var(--s-accent); }
.mini.section.has-photo .mini-photo { top: 0; right: 0; width: 50%; height: 100%; }
.mini.side-photo { padding-right: 43%; }
.mini.side-photo .mini-photo { top: 8%; right: 5%; width: 34%; height: 80%; border-radius: 6px; }
.mini .dotnum {
  display: inline-grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--s-accent); color: var(--s-on, #fff); font-weight: 700; font-size: clamp(6px, 2.4cqi, 9px);
}
.mini .cards { display: grid; gap: 4%; grid-template-columns: repeat(3, 1fr); }
.mini .cards.c2, .mini .cards.c4 { grid-template-columns: repeat(2, 1fr); }
.mini .mcard { background: var(--s-soft); border-radius: 5px; padding: 5%; display: flex; flex-direction: column; gap: 3px; }
.mini .mcard b, .mini .step b { font-size: clamp(7px, 2.9cqi, 10px); }
.mini small { color: var(--s-muted); font-size: clamp(6px, 2.3cqi, 8px); line-height: 1.3; }
.mini .steps { display: flex; justify-content: space-between; gap: 3%; position: relative; text-align: center; }
.mini .steps::before { content: ""; position: absolute; top: .8em; left: 10%; right: 10%; height: 2px; background: var(--s-accent); opacity: .4; }
.mini .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.mini .step .dotnum { width: 2em; height: 2em; }
.mini .timeline { display: flex; gap: 3%; border-top: 2px solid color-mix(in srgb, var(--s-accent) 45%, transparent); margin-top: 14%; }
.mini .tpoint { flex: 1; position: relative; padding-top: 6%; }
.mini .tpoint b { position: absolute; bottom: 100%; margin-bottom: 4px; color: var(--s-accent); font-size: clamp(8px, 3.6cqi, 12px); }
.mini .tpoint i { position: absolute; top: -5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--s-accent); }
.mini .mcard small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mini .cards.c4, .mini .cards.c5, .mini .cards.c6 { gap: 3%; }
.mini .cards.c4 .mcard, .mini .cards.c5 .mcard, .mini .cards.c6 .mcard { padding: 3% 4%; gap: 1px; }

/* ================= Чаты: список слева ================= */
.view-chat.active { display: flex; flex-direction: column; padding-bottom: 20px; }
.view-chat > * { max-width: none; margin: 0; }
/* список чатов в боковом меню, под «История»; язык и профиль остаются внизу */
.chat-list { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; margin-top: -8px; }
.chat-list .new-chat { width: 100%; }
.new-chat { width: 100%; }
.chat-items { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.chat-item {
  display: flex; align-items: center; gap: 6px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  color: var(--text); transition: background .15s;
}
.chat-item:hover { background: var(--surface-2); }
.chat-item.active { background: var(--accent-soft); }
.chat-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-item-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.chat-item-text small { color: var(--muted); font-size: 12px; }
.chat-item .icon-btn { opacity: 0; }
.chat-item:hover .icon-btn, .chat-item.active .icon-btn { opacity: 1; }
.chat-list-empty { color: var(--muted); font-size: 14px; padding: 8px 10px; }
.chat-main { flex: 1; min-width: 0; max-width: 880px; margin: 0 auto !important; display: flex; flex-direction: column; min-height: 0; }
.chats-toggle { display: none; }

/* ================= Общие мелочи ================= */
.icon-btn {
  width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--muted);
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.icon-btn.danger:hover:not(:disabled) { color: var(--danger); }
.icon-btn:disabled { opacity: .3; cursor: default; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.hint { margin: 0; font-size: 13px; color: var(--muted); background: var(--surface-2); padding: 8px 12px; border-radius: 8px; }

/* ================= Редактор презентации ================= */
.ed-deck, .ed-slide { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.ed-slide-head { display: flex; align-items: center; gap: 10px; }
.ed-slide-tools { margin-left: auto; display: flex; gap: 2px; }
.ed-field { display: flex; flex-direction: column; gap: 5px; }
.ed-field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.ed-field em { font-weight: 400; font-style: normal; opacity: .8; }
.ed-field input, .ed-item input {
  width: 100%; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg); outline: none;
}
.ed-field input:focus, .ed-item input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ed-field textarea { padding: 9px 12px; }
.ed-items { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ed-item { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px; width: 100%; }
.ed-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ed-cols > div { display: flex; flex-direction: column; gap: 12px; }
.ed-visual { display: flex; gap: 16px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--surface-2); }
.ed-thumb { width: 120px; aspect-ratio: 3 / 4; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: var(--surface);
  display: grid; place-items: center; color: var(--muted); font-size: 12px; text-align: center; border: 1px dashed var(--border); }
.ed-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ed-visual-controls { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.ed-visual-buttons { display: flex; gap: 8px; }
.ed-notes summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; }
.ed-notes .ed-field { margin-top: 8px; }
.ed-bottom { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ================= Таблицы: режимы и загрузка файлов ================= */
/* вкладки — сегментный переключатель: тонкая рамка, выбранный вариант — спокойная плашка */
.mode-tabs {
  display: flex; gap: 2px; width: fit-content; max-width: 100%; padding: 4px;
  margin: 0 0 18px max(0px, calc((100% - 920px) / 2));  /* по левому краю колонки с формой (она шириной 920px по центру) */
  border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, .03);
  overflow-x: auto; scrollbar-width: none;  /* на узком экране — листается вбок */
}
.mode-tabs::-webkit-scrollbar { display: none; }
.mode-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 16px 7px 13px; border: 0; border-radius: 8px; background: transparent; white-space: nowrap;
  color: var(--muted); font-size: 14px; font-weight: 500; transition: color .15s, background .15s;
}
/* контурная иконка по теме кнопки: прозрачная, только линии, цвет — как у текста */
.mode-tab svg { width: 16px; height: 16px; stroke-width: 1.7; transition: color .15s; }
.mode-tab.active svg { color: var(--accent); }
.mode-tab:hover { color: var(--text); }
.mode-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mode-tab.active {
  background: var(--surface-2); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}
:root[data-theme="light"] .mode-tabs { background: none; }  /* без серой подложки за кнопками (в «Играх» она была видна) */
:root[data-theme="light"] .mode-tab.active {
  background: var(--surface); box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 1px 1px rgba(15, 23, 42, .04);
}
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; cursor: pointer;
  padding: 28px 20px; border: 2px dashed var(--border); border-radius: var(--radius); background: var(--bg);
  transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input { display: none; }
.dropzone svg { width: 30px; height: 30px; color: var(--accent); }
.dropzone span { color: var(--muted); font-size: 13px; max-width: 460px; }
.file-list { display: flex; flex-direction: column; gap: 6px; }
.file-list:empty { display: none; }
.file-chip { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border-radius: 10px; background: var(--surface-2); }
.file-chip svg { width: 18px; height: 18px; color: var(--accent); }
.file-chip span { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-chip em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--muted); white-space: nowrap; }

@media (max-width: 760px) {
  .view-chat.active { flex-direction: column; gap: 0; }
  .chats-toggle { display: inline-flex; }
  .chat-list {
    display: none; position: fixed; inset: 0 0 60px 0; z-index: 20; width: auto;
    background: var(--surface); padding: 16px;
  }
  body.chats-open .chat-list { display: flex; }
  .chat-item .icon-btn { opacity: 1; }
  .ed-item { grid-template-columns: 1fr auto; }
  .ed-item input[data-sub="text"] { grid-column: 1 / 2; }
  .ed-cols { grid-template-columns: 1fr; }
  .ed-visual { flex-direction: column; }
  .file-chip em { display: none; }
}

/* шаги переноса: «откуда» и «куда» */
.import-step { display: flex; flex-direction: column; gap: 8px; }
.step-label { font-size: 14px; font-weight: 700; }
.step-label em { font-style: normal; font-weight: 400; color: var(--muted); }
.dropzone.small { padding: 18px 20px; }

/* ================= Фиолетовые иконки и кнопки ================= */
/* Все иконки и второстепенные кнопки — в основном фиолетовом цвете. */
.nav-item svg { color: var(--accent); }
/* наведение на кнопки панели — почти прозрачная плашка; выбранный пункт остаётся фиолетовым */
.nav-item:not(.active):hover { background: var(--hover-glass); }

.icon-btn { color: var(--accent); }
.icon-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-hover); }

.btn.ghost { border-color: var(--accent); color: var(--accent); }
.btn.ghost:hover { background: var(--accent-soft); }



.msg-actions button { color: var(--accent); }
.msg-actions button:hover { background: var(--accent-soft); color: var(--accent-hover); }
.chat-item:not(.active):hover { background: var(--hover-glass); }

/* ================= Пустой чат: поле запроса по центру экрана ================= */
/* Как в Gemini: пока сообщений нет, приветствие, поле и подсказки стоят единым блоком посередине экрана,
   заголовка раздела нет. Как только начинается разговор, поле опускается вниз, заголовок возвращается. */
.view-chat .chat-main { position: relative; }
@media (min-width: 761px) {  /* на телефоне в заголовке — кнопка «Чаты», он остаётся */
  .chat-main:has(#chatEmpty:not([hidden])) .view-head { position: absolute; inset: 0 0 auto; visibility: hidden; }
}
.chat-main:has(#chatEmpty:not([hidden])) .chat-scroll { flex: 0 1 auto; margin-top: auto; padding-bottom: 26px; overflow: visible; }
.chat-main:has(#chatEmpty:not([hidden])) .chat-empty { padding-top: 0; }
.chat-main:has(#chatEmpty:not([hidden])) .suggestions { margin-bottom: auto; padding-bottom: 6vh; }

/* ================= Аккаунт в боковом меню ================= */
.user {
  display: flex; align-items: center; gap: 10px;
  margin-top: -12px; padding: 12px 4px 0 8px; border-top: 1px solid var(--border);
}
.user-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 15px;
}
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-avatar svg { width: 18px; height: 18px; }  /* гость — значок человека вместо буквы и фото */
.user-info { flex: 1; min-width: 0; line-height: 1.3; }
.user-name, .user-email { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-name { font-size: 14px; font-weight: 600; }
.user-email { font-size: 12px; color: var(--muted); }

@media (max-width: 760px) {
  .user { margin: 0; padding: 0 4px; gap: 4px; border-top: 0; }
  .user-info { display: none; }
  .user-avatar { width: 28px; height: 28px; font-size: 13px; }
}
/* узкий телефон: в нижнем меню не хватает места — оставляем только кнопку «Выйти» */
@media (max-width: 380px) {
  .user { padding: 0; }
  .user-avatar { display: none; }
  .nav-item { padding: 6px 2px; }
}

/* ================= Страница входа ================= */
.login {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(1100px 520px at 50% -12%, var(--accent-soft), transparent 70%), var(--bg);
}
.login-card {
  width: 100%; max-width: 420px; padding: 36px 32px 28px;
  display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
}
.login-card .brand { display: flex; padding: 0; }  /* на телефоне .brand скрыт в меню, но не здесь */
.login-card .lang-switch { flex: none; width: 200px; }  /* язык страницы — под карточкой входа */
/* появление: карточка поднимается, её содержимое проявляется по очереди (как платформа после входа) */
.login-card { animation: rise .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.login-card > * { animation: rise .6s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
.login-card > :nth-child(2) { --i: 1; }
.login-card > :nth-child(3) { --i: 2; }
.login-card > :nth-child(4) { --i: 3; }
.login-card > :nth-child(5) { --i: 4; }
.login-card > :nth-child(6) { --i: 5; }
@media (prefers-reduced-motion: reduce) { .login-card, .login-card > * { animation: none; } }
.login-card h1 { margin-bottom: 8px; }
.login-card p { margin: 0; color: var(--muted); }
.login-note { font-size: 13px; line-height: 1.45; }
/* согласие с правилами и политикой — мелко, под чертой */
.login-card .login-consent { align-self: stretch; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; line-height: 1.5; }
.login-consent a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.login-card > :nth-child(7) { --i: 6; }
/* ошибка входа — как в Gemini: круглый значок «!» и текст обычным цветом на мягкой плашке */
.login-error {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 16px; border-radius: 16px;
  font: 400 14px/20px var(--font-text); text-align: left; color: var(--text); background: rgba(242, 184, 181, .08);
}
.login-error[hidden] { display: none; }
.login-error::before {
  content: ""; flex-shrink: 0; width: 20px; height: 20px; background: #F2B8B5;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* кнопка по правилам оформления Google: белая (в тёмной теме — тёмная) с цветной «G» */
.google-btn {
  --g-bg: #131314; --g-border: #8E918F; --g-text: #E3E3E3; --g-hover: rgba(227, 227, 227, .08);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; height: 44px; padding: 0 16px; border-radius: 22px;
  background: var(--g-bg); border: 1px solid var(--g-border); color: var(--g-text);
  font: 500 15px/1 var(--font-text); text-decoration: none;
  transition: background .15s, box-shadow .15s;
}
.google-btn:hover { background: linear-gradient(var(--g-hover), var(--g-hover)), var(--g-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.google-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 4px var(--accent); }
.google-btn svg { width: 20px; height: 20px; stroke: none; }  /* у логотипа свои цвета, без общей обводки иконок */
:root[data-theme="light"] .google-btn { --g-bg: #FFFFFF; --g-border: #747775; --g-text: #1F1F1F; --g-hover: rgba(31, 31, 31, .08); }

/* ================= Новые разделы: документы, игры, лаборатория ================= */
:root { --good: #4ADE80; }
:root[data-theme="light"] { --good: #16A34A; }

.form input[type="text"] {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.label em { font-weight: 400; font-style: normal; opacity: .8; }

/* превью документа — как лист бумаги: чёрный текст и рамки, как в школьных бланках */
.doc-page { padding: 28px 32px; font-size: 14px; line-height: 1.5; }
.doc-page p { margin: 0 0 8px; }
.doc-title { text-align: center; font-size: 17px; margin: 0 0 14px; }
.doc-subtitle { text-align: center; font-weight: 600; margin: -6px 0 14px; }  /* «Тема урока: «…».» под заголовком КСП */
.doc-h { font-size: 15px; margin: 18px 0 8px; }
.doc-table-wrap { overflow-x: auto; }
.doc-table { border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: 13.5px; }
.doc-table th, .doc-table td { border: 1px solid var(--text); padding: 6px 9px; text-align: left; vertical-align: top; }
.doc-table thead th { text-align: center; }
.doc-table.kv th { width: 32%; font-weight: 600; }
.doc-fields { display: flex; gap: 8px 22px; flex-wrap: wrap; }
.doc-fields i { display: inline-block; width: 110px; border-bottom: 1px solid var(--text); }
.doc-task { margin: 12px 0; }
.doc-page .doc-option { padding-left: 22px; margin: 2px 0; }
.doc-line { height: 26px; border-bottom: 1px solid var(--muted); }
.doc-list { margin: 0; padding-left: 22px; }
.doc-break { border: 0; border-top: 2px dashed var(--border); margin: 24px 0; }
/* ҚМЖ по действующей форме: «Бекітемін» справа, шапка-форма, фото и ссылки на платформы в ячейках этапов */
.doc-page .doc-approve { text-align: right; margin: 0 0 14px; }
.doc-h.center { text-align: center; }
.doc-form td b { font-weight: 600; }
.doc-photo { margin: 8px 0 4px; }
.doc-photo img { display: block; width: auto; max-width: min(100%, 220px); max-height: 220px; border-radius: 4px; }
.doc-photo figcaption { margin-top: 4px; font-size: 12.5px; font-style: italic; }
.doc-photo small { display: block; font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; }
.doc-page .doc-link { margin: 6px 0 0; font-size: 12.5px; }
.doc-link a { color: var(--accent); font-weight: 600; }
.doc-link span { color: var(--muted); }

/* игры: крупно, чтобы читалось на проекторе с последней парты */
.game-stage { position: relative; padding: 28px; min-height: 420px; display: flex; flex-direction: column; }
.game-stage:fullscreen { padding: 5vh 6vw; font-size: 1.35em; background: var(--bg); overflow: auto; }
.game-body { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.game-stage:fullscreen .game-body { justify-content: center; }
.game-body > .game-progress { padding-right: 50px; }
/* звук игры (sounds.js): круглая кнопка в углу сцены; мигает, пока браузер ждёт первого нажатия */
.sound-btn {
  position: absolute; top: 18px; right: 18px; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
}
.sound-btn:hover { color: var(--text); border-color: var(--accent); }
.sound-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sound-btn.sound-wait { color: var(--accent); animation: sound-wait 1.4s ease-in-out infinite; }
@keyframes sound-wait { 50% { box-shadow: 0 0 0 7px var(--accent-soft); } }
.game-progress { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-weight: 600; }
.game-question { font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.game-stage:fullscreen .game-question { font-size: 2.2em; }
.quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tf-options { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quiz-option {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; text-align: left;
  border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface);
  font-size: 1.15em; font-weight: 500; transition: border-color .15s, background .15s, transform .1s;
}
.tf-options .quiz-option { justify-content: center; font-size: 1.4em; font-weight: 700; padding: 22px; }
.quiz-option:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.quiz-option:disabled { cursor: default; color: var(--text); }
.quiz-option b {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent);
}
.quiz-option.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
.quiz-option.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); }
/* викторина — яркие плитки, как в живой игре (live.css): фиолетовая, синяя, янтарная, зелёная */
.quiz-options .quiz-option {
  min-height: 84px; border: 0; color: #fff; font-weight: 600; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18);
  background: linear-gradient(160deg, #22C55E, #15803D);
}
.quiz-options .quiz-option:nth-child(2) { background: linear-gradient(160deg, #15803D, #0A6BB5); }
.quiz-options .quiz-option:nth-child(3) { background: linear-gradient(160deg, #FCC63A, #F2A516); color: #2B1700; }
.quiz-options .quiz-option:nth-child(4) { background: linear-gradient(160deg, #14A874, #0B8A5F); }
.quiz-options .quiz-option b { background: rgba(255, 255, 255, .22); color: inherit; }
.quiz-options .quiz-option:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.quiz-options .quiz-option:disabled { color: #fff; opacity: .3; }
.quiz-options .quiz-option:nth-child(3):disabled { color: #2B1700; }
.quiz-options .quiz-option.right { opacity: 1; box-shadow: 0 0 0 4px #fff, 0 0 30px rgba(255, 255, 255, .3); }
.quiz-options .quiz-option.right::after { content: "✓"; margin-left: auto; font-size: 1.3em; font-weight: 700; }
.quiz-options .quiz-option.wrong { opacity: .75; box-shadow: 0 0 0 4px var(--danger); }
.live-launch {
  border: 0; color: #fff; background: linear-gradient(135deg, #22C55E, #0A74C2 60%, #0B8A5F);
  box-shadow: 0 8px 24px rgba(22, 163, 74, .35);
}
.live-launch:hover { filter: brightness(1.1); }
.live-note { margin: -4px 0 14px; color: var(--muted); font-size: 14px; }
.game-feedback { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-radius: var(--radius); }
.game-feedback p { margin: 4px 0 0; color: var(--muted); }
.game-feedback.ok { background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.game-feedback.ok b { color: var(--good); }
.game-feedback.bad { background: color-mix(in srgb, var(--danger) 9%, var(--surface)); }
.game-feedback.bad b { color: var(--danger); }
.game-finish { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.game-finish h3 { font-size: 24px; margin: 0; }
.game-trophy { font-size: 64px; line-height: 1; }

.match-board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.match-col { display: flex; flex-direction: column; gap: 10px; }
.match-card {
  padding: 14px 16px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface);
  font-size: 1.05em; text-align: left; transition: border-color .15s, background .15s, opacity .3s;
}
.match-card:hover:not(:disabled) { border-color: var(--accent); }
.match-card.picked { border-color: var(--accent); background: var(--accent-soft); }
.match-card.matched { border-color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--surface)); opacity: .6; cursor: default; color: var(--text); }
.match-card.miss { border-color: var(--danger); animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* кроссворд: тень вместо рамки, чтобы линии между соседними клетками не двоились */
.cw { --cw-size: 34px; display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap; }
.game-stage:fullscreen .cw { --cw-size: 46px; }
.cw-grid { display: grid; overflow-x: auto; max-width: 100%; padding: 1px; }
.cw-cell, .cw-empty { width: var(--cw-size); height: var(--cw-size); }
.cw-cell { position: relative; background: var(--surface); box-shadow: 0 0 0 1px var(--text); }
.cw-cell small { position: absolute; top: 1px; left: 3px; font-size: 9px; line-height: 1; color: var(--muted); pointer-events: none; }
.cw-cell input {
  width: 100%; height: 100%; padding: 4px 0 0; border: 0; outline: none; background: transparent;
  text-align: center; font-size: calc(var(--cw-size) * .5); font-weight: 700; text-transform: uppercase;
}
.cw-cell input:focus { background: var(--accent-soft); }
.cw-cell input.good { color: var(--good); }
.cw-cell input.bad { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.cw-clues { flex: 1; min-width: 240px; }
.cw-clues h4 { margin: 0 0 6px; }
.cw-clues ol { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 2px; }
.cw-clues li { cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.cw-clues li:hover { background: var(--accent-soft); }
.cw-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cw-status { font-weight: 600; margin: 10px 0 0; }

/* лаборатория */
.sim-frame { overflow: hidden; }
.sim-frame iframe { display: block; width: 100%; aspect-ratio: 16 / 10; min-height: 420px; border: 0; background: #fff; }
.sim-steps { padding: 18px 22px; margin-top: 14px; }
.sim-steps h4 { margin: 0 0 8px; }
.sim-steps ol { margin: 0; padding-left: 22px; }

/* ===== шаблоны в превью слайдов: шрифты, украшения, карточки (как в файле PowerPoint) ===== */
.mini { font-family: var(--s-body, inherit); isolation: isolate; }
.mini h4, .mini b, .mini .fact, .mini .label-up, .mini cite { font-family: var(--s-font, inherit); }
.mini::before, .mini::after { position: absolute; z-index: -1; pointer-events: none; }
[data-decor]:not([data-decor="circles"]) .mini.title { border-left: 0; }
[data-title="center"] .mini.title { align-items: center; text-align: center; padding: 7% 9% 0; }

[data-decor="circles"] .mini.title::before {
  content: ""; width: 34%; aspect-ratio: 1; right: -9%; top: -16%; border-radius: 50%; background: var(--s-soft);
}
[data-decor="circles"] .mini.title::after {
  content: ""; width: 10%; aspect-ratio: 1; right: 5%; bottom: 10%; border-radius: 50%; background: var(--s-accent2);
}
[data-decor="dots"] .mini.title::before {
  content: ""; width: 20%; height: 27%; right: 7%; top: 10%;
  background: radial-gradient(circle, var(--s-accent2) 30%, transparent 34%) 0 0 / 16.66% 20%;
}
[data-decor="dots"] .mini.title::after {
  content: ""; width: 8%; aspect-ratio: 1; right: 7%; bottom: 12%; border: 2px solid var(--s-accent); border-radius: 50%;
}
[data-decor="leaves"] .mini.title::before {
  content: ""; width: 22%; height: 11%; right: 6%; top: 22%; border-radius: 50%; background: var(--s-accent); transform: rotate(20deg);
}
[data-decor="leaves"] .mini.title::after {
  content: ""; width: 16%; height: 8%; right: 10%; top: 8%; border-radius: 50%; background: var(--s-accent2); transform: rotate(-55deg);
}
[data-decor="waves"] .mini.title::before {
  content: ""; left: -10%; right: -10%; bottom: -12%; height: 24%; border-radius: 50% 50% 0 0 / 70% 70% 0 0;
  background: var(--s-accent); box-shadow: 0 -5px 0 var(--s-soft);
}
[data-decor="waves"] .mini.title::after {
  content: ""; width: 9%; aspect-ratio: 1; right: 13%; top: 11%; border-radius: 50%; background: var(--s-accent2);
}
[data-decor="stripes"] .mini.title::before {
  content: ""; top: 0; bottom: 0; right: -3%; width: 26%; transform: skewX(-8deg);
  background: linear-gradient(90deg, var(--s-soft) 0 34%, var(--s-accent2) 34% 67%, var(--s-accent) 67%);
}
[data-decor="corner"] .mini.title::before {
  content: ""; top: 0; right: 0; width: 40%; height: 52%; background: var(--s-accent); clip-path: polygon(0 0, 100% 0, 100% 100%);
}
[data-decor="corner"] .mini.title::after {
  content: ""; left: 0; bottom: 0; width: 20%; height: 24%; background: var(--s-accent2); clip-path: polygon(0 0, 0 100%, 100% 100%);
}
/* рамки — на всех слайдах, как в файле */
[data-decor="frame"] .mini::before {
  content: ""; inset: 3%; border: 1.5px solid var(--s-accent); outline: 1px solid var(--s-accent2); outline-offset: -4px;
}
[data-decor="frame"] .mini.section::before { border-color: var(--s-on); outline-color: var(--s-on); }
[data-decor="board"] .mini { border: 4px solid #7A5230; }
[data-decor="board"] .mini.title::after { content: ""; left: 18%; right: 18%; bottom: 2%; height: 3%; background: #9C6B3F; }

[data-cards="outline"] .mini .mcard, [data-cards="outline"] .mini .col, [data-cards="outline"] .mini .soft-box {
  background: transparent; border: 1px solid var(--s-accent);
}
[data-cards="top"] .mini .mcard, [data-cards="top"] .mini .col, [data-cards="top"] .mini .soft-box {
  border-radius: 0; border-top: 2px solid var(--s-accent);
}

/* ----- титульный слайд: половина цветом и газетная шапка ----- */
[data-title="split"] .mini.title { background: linear-gradient(90deg, var(--s-accent) 50%, var(--s-bg) 50%); padding: 7% 55% 0 6%; }
[data-title="split"] .mini.title.has-photo { background: var(--s-accent); padding-right: 52%; }
[data-title="split"] .mini.title :is(h4, p) { color: var(--s-on); }
[data-title="split"] .mini.title.has-photo .mini-photo { border-left: 0; }
[data-title="masthead"] .mini.title:not(.has-photo) { text-align: center; padding: 7% 8% 0; }
[data-title="masthead"] .mini.title:not(.has-photo) .mini-text { display: flex; flex-direction: column; }
[data-title="masthead"] .mini.title:not(.has-photo) p {  /* рубрика над названием */
  order: -1; margin-bottom: 6%; color: var(--s-accent); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: clamp(6px, 2.6cqi, 9px);
}
[data-title="masthead"] .mini.title:not(.has-photo) h4 { margin: 0; font-size: clamp(14px, 8.6cqi, 26px); }
/* двойные газетные линейки: толстая и тонкая */
[data-title="masthead"] .mini.title::before, [data-title="masthead"] .mini.title::after,
[data-decor="press"] .mini.section::before, [data-decor="press"] .mini.section::after {
  content: ""; left: 6%; right: 6%; height: 6px; box-sizing: border-box; border: 0 solid var(--s-text);
}
[data-title="masthead"] .mini.title::before { top: 11%; border-width: 2px 0 1px; }
[data-title="masthead"] .mini.title::after { bottom: 11%; border-width: 1px 0 2px; }
[data-title="masthead"] .mini.title.has-photo::before, [data-title="masthead"] .mini.title.has-photo::after { right: 56%; }
[data-decor="press"] .mini.section::before { top: 7%; border-width: 2px 0 1px; border-color: var(--s-on); }
[data-decor="press"] .mini.section::after { bottom: 7%; border-width: 1px 0 2px; border-color: var(--s-on); }

/* ----- заголовки контентных слайдов: полоса, линия, номер, линейки, полоса слева ----- */
.slide-grid { counter-reset: slide; }
.mini { counter-increment: slide; }
[data-heading]:not([data-heading="bar"]) .mini.big-fact .bar { display: none; }  /* у «крупного факта» своя подпись */
[data-heading="band"] .mhead .bar, [data-heading="underline"] .mhead .bar, [data-heading="side"] .mhead .bar { display: none; }
[data-heading="band"] .mhead { position: relative; padding: 1% 0 4.5%; margin-bottom: 5%; }
[data-heading="band"] .mhead::before {  /* полоса до краёв слайда — лишнее обрезает .mini */
  content: ""; position: absolute; z-index: -1; inset: -100vmax -100vmax 0; background: var(--s-accent);
}
[data-heading="band"] .mhead h4 { margin: 0; color: var(--s-on); }
[data-heading="underline"] .mhead h4 { border-bottom: 2px solid var(--s-accent); padding-bottom: 3%; }
[data-heading="rules"] .mhead .bar {
  width: 100%; height: 6px; margin-bottom: 4%; border-radius: 0; background: none;
  border: 0 solid var(--s-text); border-width: 2px 0 1px;
}
[data-heading="rules"] .mhead h4 { border-bottom: 1px solid var(--s-text); padding-bottom: 3%; }
[data-heading="number"] .mhead { display: flex; align-items: center; gap: 4%; margin-bottom: 6%; }
[data-heading="number"] .mhead h4 { margin: 0; }
[data-heading="number"] .mhead .bar {  /* номер слайда вместо черты: 01, 02… */
  width: auto; height: auto; margin: 0; padding-right: 4%; border-radius: 0; background: none;
  border-right: 2px solid var(--s-accent2); color: var(--s-accent); font: 700 clamp(12px, 6.6cqi, 20px)/1 var(--s-font);
}
[data-heading="number"] .mhead .bar::before { content: counter(slide, decimal-leading-zero); }
[data-heading="number"] .mini.content:not(.big-fact) .num { display: none; }
[data-heading="side"] .mini.content {
  background: linear-gradient(var(--s-accent), var(--s-accent)) 0 0 / 2.3% 100% no-repeat, var(--s-bg);
}

/* ----- украшения новых шаблонов ----- */
.mini {
  --diamond-row: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10'%3E%3Cpath d='M7 0l5 5-5 5-5-5z'/%3E%3C/svg%3E");
  --diamond-col: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14'%3E%3Cpath d='M5 2l5 5-5 5-5-5z'/%3E%3C/svg%3E");
}
/* тетрадь: голубые линейки и поле */
[data-decor="notebook"] .mini:not(.section):not(.quote) {
  background:
    linear-gradient(90deg, transparent 4.5%, var(--s-accent2) 4.5% calc(4.5% + 1px), transparent 0),
    repeating-linear-gradient(transparent 0 calc(5.6% - 1px), #D6E2F7 0 5.6%),
    var(--s-bg);
}
[data-decor="notebook"] .mini.section {
  background: linear-gradient(90deg, transparent 4.5%, var(--s-on) 4.5% calc(4.5% + 1px), transparent 0), var(--s-accent);
}
/* космос: звёзды, на титульном — планета с кольцом */
[data-decor="stars"] .mini {
  --star: #C7D2FE; --sky: var(--s-bg);
  background:
    radial-gradient(circle at 7% 16%, var(--star) 0 1px, transparent 1.5px),
    radial-gradient(circle at 19% 74%, var(--star) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 31% 9%, var(--star) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 43% 90%, var(--star) 0 1px, transparent 1.5px),
    radial-gradient(circle at 56% 24%, var(--star) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 64% 68%, var(--star) 0 1.2px, transparent 1.7px),
    radial-gradient(circle at 86% 86%, var(--star) 0 1px, transparent 1.5px),
    radial-gradient(circle at 95% 50%, var(--star) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 12% 44%, var(--star) 0 .8px, transparent 1.3px),
    radial-gradient(circle at 50% 58%, var(--s-accent2) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 10%, var(--s-accent2) 0 1px, transparent 1.5px),
    var(--sky);
}
[data-decor="stars"] .mini.content { --star: #5B648F; }
[data-decor="stars"] .mini.section { --star: #fff; --sky: var(--s-accent); }
[data-decor="stars"] .mini.quote { background: var(--s-soft); }
[data-decor="stars"] .mini.title::before {
  content: ""; left: 75.3%; top: 9.3%; width: 14.3%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent);
}
[data-decor="stars"] .mini.title::after {
  content: ""; left: 71.2%; top: 18.6%; width: 22.5%; height: 6.7%; box-sizing: border-box;
  border: 1.5px solid var(--s-accent2); border-radius: 50%; transform: rotate(-14deg);
}
/* орнамент: ряды ромбов, на титульном — ромбы на стыке половин и большой ромб в рамке */
[data-decor="ornament"] .mini.title::before {
  content: ""; top: 0; bottom: 0; left: 48.8%; width: 2.4%; background: var(--s-accent2);
  -webkit-mask: var(--diamond-col) 0 0 / 100% auto repeat-y; mask: var(--diamond-col) 0 0 / 100% auto repeat-y;
}
[data-decor="ornament"] .mini.title::after {
  content: ""; left: 68.5%; top: 21.8%; width: 19%; aspect-ratio: 1; box-sizing: border-box; padding: 2.4%;
  border: 1.5px solid var(--s-accent2); background: var(--s-soft) content-box; transform: rotate(45deg);
}
[data-decor="ornament"] .mini.section::before, [data-decor="ornament"] .mini.section::after,
[data-decor="ornament"] .mini.content::after {
  content: ""; left: 0; right: 0; height: 3.4%; background: var(--s-accent2);
  -webkit-mask: var(--diamond-row) 0 0 / auto 100% repeat-x; mask: var(--diamond-row) 0 0 / auto 100% repeat-x;
}
[data-decor="ornament"] .mini.section::before { top: 4%; }
[data-decor="ornament"] .mini.section::after { bottom: 4%; }
[data-decor="ornament"] .mini.content::after { bottom: 1.5%; height: 2.2%; }
[data-decor="ornament"][data-heading="band"] .mhead::after {  /* ромбы по нижнему краю полосы */
  content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: -1.1cqi; height: 2.2cqi;
  background: var(--s-accent2);
  -webkit-mask: var(--diamond-row) 0 0 / auto 100% repeat-x; mask: var(--diamond-row) 0 0 / auto 100% repeat-x;
}
/* контраст: крупные геометрические фигуры */
[data-decor="geo"] .mini.title::before {
  content: ""; left: 68.5%; top: 54.7%; width: 37.5%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent2);
}
[data-decor="geo"] .mini.title::after {
  content: ""; left: 58%; top: 13.3%; width: 7.5%; aspect-ratio: 1; background: var(--s-accent); transform: rotate(15deg);
}
[data-decor="geo"] .mini.section::before {
  content: ""; left: 77.5%; top: 60%; width: 31.5%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent2);
}
[data-decor="geo"] .mini.content::before {
  content: ""; right: 3.7%; top: 5.3%; width: 1.7%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent2);
}
[data-decor="geo"] .mini.content::after {
  content: ""; right: 6.6%; top: 3%; width: 3.2%; aspect-ratio: 1; background: var(--s-accent); transform: rotate(15deg);
}
/* пастель: мягкие пятна по углам */
[data-decor="blobs"] .mini.title::before {
  content: ""; left: -16.5%; top: -26.7%; width: 42%; height: 66.7%; border-radius: 50%; background: var(--s-soft);
}
[data-decor="blobs"] .mini.title::after {
  content: ""; left: 74.5%; top: 60%; width: 34.5%; height: 56%; border-radius: 50%;
  background: color-mix(in srgb, var(--s-accent2) 40%, #fff);
}
[data-decor="blobs"] .mini.section::before {
  content: ""; left: 80.5%; top: -18.7%; width: 30%; height: 48%; border-radius: 50%;
  background: color-mix(in srgb, var(--s-accent) 70%, #fff);
}
[data-decor="blobs"] .mini.content::before {
  content: ""; left: 88%; top: -12%; width: 18%; height: 29.3%; border-radius: 50%; background: var(--s-soft);
}
/* ----- украшения шаблонов в популярных стилях ----- */
/* градиент: яркий переход цвета (название — на карточке), на обычных слайдах — светлый переход и «стекло» */
[data-decor="gradient"] .mini.title:not(.has-photo), [data-decor="gradient"] .mini.section:not(.has-photo) {
  background: linear-gradient(125deg, var(--s-accent), var(--s-accent2));
}
[data-decor="gradient"] .mini.content {
  background: linear-gradient(125deg, color-mix(in srgb, var(--s-accent) 10%, #fff), color-mix(in srgb, var(--s-accent2) 12%, #fff));
}
[data-decor="gradient"] .mini.title::before {
  content: ""; left: -10.5%; top: -21.3%; width: 34.5%; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .16);
}
[data-decor="gradient"] .mini.title::after {
  content: ""; left: 74.5%; top: 60%; width: 37.5%; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .12);
}
[data-decor="gradient"] .mini.section::before {
  content: ""; left: 76%; top: 60%; width: 33%; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .14);
}
[data-decor="gradient"] .mini.content::before {
  content: ""; left: 82%; top: -17.3%; width: 25.5%; height: 34.7%; border-radius: 50%;
  background: color-mix(in srgb, var(--s-accent2) 25%, transparent); filter: blur(4px);
}
/* неон: светящиеся контуры */
[data-decor="neon"] .mini::before, [data-decor="neon"] .mini::after { box-sizing: border-box; }
[data-decor="neon"] .mini.title::before {
  content: ""; left: -12%; top: 61.3%; width: 27%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--s-accent); box-shadow: 0 0 6px var(--s-accent), inset 0 0 6px var(--s-accent);
}
[data-decor="neon"] .mini.title::after {
  content: ""; left: 83.5%; top: 6.7%; width: 9.75%; aspect-ratio: 1; border-radius: 18%; transform: rotate(15deg);
  border: 1.5px solid var(--s-accent2); box-shadow: 0 0 6px var(--s-accent2), inset 0 0 6px var(--s-accent2);
}
[data-decor="neon"] .mini.section::before {
  content: ""; left: 77.5%; top: 60%; width: 31.5%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid var(--s-on);
}
[data-decor="neon"] .mini.section::after {
  content: ""; left: 83.5%; top: 9.3%; width: 8.25%; aspect-ratio: 1; border-radius: 18%; transform: rotate(15deg);
  border: 1.5px solid var(--s-on);
}
[data-decor="neon"] .mini.content::before {
  content: ""; left: 90.6%; top: 3.7%; width: 3.15%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--s-accent); box-shadow: 0 0 4px var(--s-accent);
}
[data-decor="neon"] .mini.content::after {
  content: ""; left: 82.4%; top: 6.3%; width: 6.4%; height: 1.5px; background: var(--s-accent2); box-shadow: 0 0 4px var(--s-accent2);
}
[data-decor="neon"] .mini :is(.mcard, .col, .soft-box) { box-shadow: 0 0 5px color-mix(in srgb, var(--s-accent) 60%, transparent); }
/* акварель: размытые полупрозрачные пятна */
[data-decor="watercolor"] .mini::before, [data-decor="watercolor"] .mini::after { border-radius: 50%; filter: blur(5px); }
[data-decor="watercolor"] .mini.title::before {
  content: ""; left: -12%; top: -24%; width: 39%; height: 58.7%; background: color-mix(in srgb, var(--s-accent) 30%, transparent);
}
[data-decor="watercolor"] .mini.title::after {
  content: ""; left: 68.5%; top: 54.7%; width: 37.5%; height: 58.7%; background: color-mix(in srgb, var(--s-accent2) 50%, transparent);
}
[data-decor="watercolor"] .mini.section::before {
  content: ""; left: 70%; top: 57.3%; width: 36%; height: 56%; background: rgb(255 255 255 / .18);
}
[data-decor="watercolor"] .mini.section::after {
  content: ""; left: 80.5%; top: -13.3%; width: 24%; height: 34.7%; background: color-mix(in srgb, var(--s-accent2) 45%, transparent);
}
[data-decor="watercolor"] .mini.content::before {
  content: ""; left: 79.75%; top: -14.7%; width: 24%; height: 30.7%; background: color-mix(in srgb, var(--s-accent2) 40%, transparent);
}
[data-decor="watercolor"] .mini.content::after {
  content: ""; left: -6.75%; top: 82.7%; width: 18%; height: 25.3%; background: color-mix(in srgb, var(--s-accent) 18%, transparent);
}
/* крафт: полоски скотча; на титульном они держат карточку с названием */
[data-decor="tape"] .mini::before, [data-decor="tape"] .mini::after {
  width: 12.75%; height: 5.6%; background: color-mix(in srgb, var(--s-accent2) 55%, transparent);
}
[data-decor="tape"] .mini.title:not(.has-photo)::before { content: ""; z-index: 1; left: 6.75%; top: 9.9%; transform: rotate(-38deg); }
[data-decor="tape"] .mini.title:not(.has-photo)::after { content: ""; z-index: 1; left: 80.5%; top: 9.9%; transform: rotate(38deg); }
[data-decor="tape"] .mini.section::before, [data-decor="tape"] .mini.section::after {
  content: ""; top: .5%; background: color-mix(in srgb, var(--s-soft) 55%, transparent);
}
[data-decor="tape"] .mini.section::before { left: -2.25%; transform: rotate(-32deg); }
[data-decor="tape"] .mini.section::after { left: 89.5%; transform: rotate(32deg); }
[data-decor="tape"] .mini.content::before { content: ""; left: 88%; top: 1.5%; transform: rotate(32deg); }
/* бизнес: квадраты у края цветной части, полоса справа на разделителе, черта под полосой заголовка */
[data-decor="blocks"] .mini.title::before { content: ""; left: 84%; top: 48%; width: 5.25%; aspect-ratio: 1; background: var(--s-accent2); }
[data-decor="blocks"] .mini.title::after {
  content: ""; left: 90%; top: 37.3%; width: 5.25%; aspect-ratio: 1; box-sizing: border-box; border: 1px solid #fff;
  box-shadow: 0 6cqi 0 rgb(255 255 255 / .2);
}
[data-decor="blocks"] .mini.section::before { content: ""; right: 0; top: 0; bottom: 0; width: 3.4%; background: var(--s-accent2); }
[data-decor="blocks"] .mini.section::after {
  content: ""; left: 84%; top: 74.7%; width: 5.25%; aspect-ratio: 1; background: var(--s-accent2);
  box-shadow: 6cqi 0 0 rgb(255 255 255 / .2);
}
[data-decor="blocks"][data-heading="band"] .mhead::after {
  content: ""; position: absolute; left: -100vmax; right: -100vmax; top: 100%; height: .55cqi; background: var(--s-accent2);
}
/* ретро: дуги «солнца» из угла и полоски внизу титульного */
[data-decor="sunrise"] .mini.title::before {
  content: ""; right: 0; top: 0; width: 25.5%; height: 45.3%;
  background: radial-gradient(100% 100% at 100% 0, var(--s-text) 38%, var(--s-accent) 0 59%, var(--s-accent2) 0 79%, var(--s-soft) 0 100%, transparent 0);
}
[data-decor="sunrise"] .mini.title::after {
  content: ""; left: 0; right: 0; top: 91.2%; height: 4.8%;
  background: linear-gradient(var(--s-text) 33.3%, var(--s-accent) 0 66.7%, var(--s-accent2) 0);
}
[data-decor="sunrise"] .mini.section::before {
  content: ""; right: 0; bottom: 0; width: 22.5%; height: 40%;
  background: radial-gradient(100% 100% at 100% 100%, var(--s-text) 53.3%, var(--s-soft) 0 76.7%, var(--s-accent2) 0 100%, transparent 0);
}
[data-decor="sunrise"] .mini.content::before {
  content: ""; right: 0; top: 0; width: 8.25%; height: 14.7%;
  background: radial-gradient(100% 100% at 100% 0, var(--s-text) 25.5%, var(--s-accent) 0 50%, var(--s-accent2) 0 74.5%, var(--s-soft) 0 100%, transparent 0);
}
/* праздник: конфетти по краям (картинка с цветами шаблона «Праздник») */
[data-decor="confetti"] .mini::before { inset: 0; background: var(--confetti) 0 0 / 100% 100%; }
[data-decor="confetti"] .mini.title::before {
  content: ""; --confetti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Crect x='882' y='94' width='42' height='7' rx='3.5' fill='%233B5BDB' transform='rotate(27 903 97.5)'/%3E%3Cellipse cx='48' cy='155' rx='13' ry='13' fill='%23FFC53D' transform='rotate(-20 48 155)'/%3E%3Cellipse cx='1252.5' cy='178.5' rx='9.5' ry='9.5' fill='%23FF6B9A' transform='rotate(-9 1252.5 178.5)'/%3E%3Cellipse cx='262' cy='712' rx='12' ry='12' fill='%232EC4B6' transform='rotate(9 262 712)'/%3E%3Cpolygon points='814.5,49 827,74 802,74' fill='%233B5BDB' transform='rotate(-24 814.5 61.5)'/%3E%3Cellipse cx='1011' cy='99' rx='14' ry='14' fill='%23FFC53D' transform='rotate(-19 1011 99)'/%3E%3Cpolygon points='1266,476 1275,494 1257,494' fill='%23FF6B9A' transform='rotate(-14 1266 485)'/%3E%3Cpolygon points='103.5,582 117,609 90,609' fill='%232EC4B6' transform='rotate(-2 103.5 595.5)'/%3E%3Cellipse cx='214.5' cy='29.5' rx='9.5' ry='9.5' fill='%233B5BDB' transform='rotate(-2 214.5 29.5)'/%3E%3Crect x='895' y='669' width='53' height='8' rx='4' fill='%23FFC53D' transform='rotate(5 921.5 673)'/%3E%3Crect x='631' y='71' width='21' height='21' rx='3.5' fill='%23FF6B9A' transform='rotate(-33 641.5 81.5)'/%3E%3Crect x='1014' y='41' width='28' height='28' rx='4.7' fill='%232EC4B6' transform='rotate(34 1028 55)'/%3E%3Cellipse cx='78' cy='631' rx='10' ry='10' fill='%233B5BDB' transform='rotate(-25 78 631)'/%3E%3Cpolygon points='1250.5,301 1264,328 1237,328' fill='%23FFC53D' transform='rotate(27 1250.5 314.5)'/%3E%3Crect x='1213' y='612' width='25' height='25' rx='4.2' fill='%23FF6B9A' transform='rotate(-29 1225.5 624.5)'/%3E%3Cpolygon points='1196.5,681 1206,700 1187,700' fill='%232EC4B6' transform='rotate(29 1196.5 690.5)'/%3E%3Cellipse cx='255' cy='30' rx='9' ry='9' fill='%233B5BDB' transform='rotate(-21 255 30)'/%3E%3Crect x='81' y='86' width='28' height='28' rx='4.7' fill='%23FFC53D' transform='rotate(28 95 100)'/%3E%3Cpolygon points='53,249 54.6,253.7 59.7,253.8 55.7,256.9 57.1,261.7 53,258.8 48.9,261.7 50.3,256.9 46.3,253.8 51.4,253.7' fill='%23FF6B9A' transform='rotate(13 53 256)'/%3E%3Cpolygon points='1220.5,379 1228,394 1213,394' fill='%232EC4B6' transform='rotate(-14 1220.5 386.5)'/%3E%3Cpolygon points='202,698 216,726 188,726' fill='%233B5BDB' transform='rotate(12 202 712)'/%3E%3Cellipse cx='103' cy='58' rx='8' ry='8' fill='%23FFC53D' transform='rotate(-22 103 58)'/%3E%3Cpolygon points='1071.5,54 1074.7,63.1 1084.3,63.3 1076.6,69.2 1079.4,78.4 1071.5,72.9 1063.6,78.4 1066.4,69.2 1058.7,63.3 1068.3,63.1' fill='%23FF6B9A' transform='rotate(-18 1071.5 67.5)'/%3E%3Cpolygon points='668,667 671.1,675.8 680.4,676 672.9,681.6 675.6,690.5 668,685.2 660.4,690.5 663.1,681.6 655.6,676 664.9,675.8' fill='%232EC4B6' transform='rotate(5 668 680)'/%3E%3Crect x='33' y='496' width='56' height='9' rx='4.5' fill='%233B5BDB' transform='rotate(-5 61 500.5)'/%3E%3Cpolygon points='1281,624 1283.1,630.1 1289.6,630.2 1284.4,634.1 1286.3,640.3 1281,636.6 1275.7,640.3 1277.6,634.1 1272.4,630.2 1278.9,630.1' fill='%23FFC53D' transform='rotate(3 1281 633)'/%3E%3Cpolygon points='725,35 736,57 714,57' fill='%23FF6B9A' transform='rotate(-5 725 46)'/%3E%3Cpolygon points='469,92 471.1,98.1 477.6,98.2 472.4,102.1 474.3,108.3 469,104.6 463.7,108.3 465.6,102.1 460.4,98.2 466.9,98.1' fill='%232EC4B6' transform='rotate(12 469 101)'/%3E%3Crect x='1115' y='48' width='27' height='27' rx='4.5' fill='%233B5BDB' transform='rotate(6 1128.5 61.5)'/%3E%3Crect x='76' y='206' width='21' height='21' rx='3.5' fill='%23FFC53D' transform='rotate(34 86.5 216.5)'/%3E%3Crect x='790' y='708' width='56' height='9' rx='4.5' fill='%23FF6B9A' transform='rotate(-6 818 712.5)'/%3E%3Cellipse cx='1304.5' cy='211.5' rx='8.5' ry='8.5' fill='%232EC4B6' transform='rotate(-23 1304.5 211.5)'/%3E%3Cellipse cx='513' cy='702' rx='9' ry='9' fill='%233B5BDB' transform='rotate(35 513 702)'/%3E%3Cpolygon points='1218.5,331 1227,348 1210,348' fill='%23FFC53D' transform='rotate(-5 1218.5 339.5)'/%3E%3Cpolygon points='414,676 417.1,684.8 426.4,685 418.9,690.6 421.6,699.5 414,694.2 406.4,699.5 409.1,690.6 401.6,685 410.9,684.8' fill='%23FF6B9A' transform='rotate(25 414 689)'/%3E%3Crect x='464' y='24' width='27' height='27' rx='4.5' fill='%232EC4B6' transform='rotate(12 477.5 37.5)'/%3E%3Crect x='153' y='67' width='55' height='9' rx='4.5' fill='%233B5BDB' transform='rotate(38 180.5 71.5)'/%3E%3Crect x='1136' y='687' width='38' height='6' rx='3' fill='%23FFC53D' transform='rotate(15 1155 690)'/%3E%3Cpolygon points='1233.5,429 1244,450 1223,450' fill='%23FF6B9A' transform='rotate(-2 1233.5 439.5)'/%3E%3Cpolygon points='1232,40 1234.1,46.1 1240.6,46.2 1235.4,50.1 1237.3,56.3 1232,52.6 1226.7,56.3 1228.6,50.1 1223.4,46.2 1229.9,46.1' fill='%232EC4B6' transform='rotate(-4 1232 49)'/%3E%3C/svg%3E");
}
[data-decor="confetti"] .mini.section::before {
  content: ""; --confetti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolygon points='1138.5,59 1148,78 1129,78' fill='%23FFC53D' transform='rotate(-23 1138.5 68.5)'/%3E%3Cpolygon points='1180.5,50 1193,75 1168,75' fill='%23FFFFFF' transform='rotate(22 1180.5 62.5)'/%3E%3Cpolygon points='981.5,29 983.7,35.4 990.5,35.6 985.1,39.7 987.1,46.2 981.5,42.3 975.9,46.2 977.9,39.7 972.5,35.6 979.3,35.4' fill='%23FF6B9A' transform='rotate(22 981.5 38.5)'/%3E%3Cpolygon points='657.5,29 670,54 645,54' fill='%232EC4B6' transform='rotate(8 657.5 41.5)'/%3E%3Cellipse cx='1261.5' cy='299.5' rx='11.5' ry='11.5' fill='%23FFC53D' transform='rotate(8 1261.5 299.5)'/%3E%3Cellipse cx='1237.5' cy='373.5' rx='11.5' ry='11.5' fill='%23FFFFFF' transform='rotate(26 1237.5 373.5)'/%3E%3Cpolygon points='1114,662 1125,684 1103,684' fill='%23FF6B9A' transform='rotate(22 1114 673)'/%3E%3Cpolygon points='510,692 518,708 502,708' fill='%232EC4B6' transform='rotate(16 510 700)'/%3E%3Crect x='468' y='668' width='22' height='22' rx='3.7' fill='%23FFC53D' transform='rotate(36 479 679)'/%3E%3Cellipse cx='1171.5' cy='470.5' rx='10.5' ry='10.5' fill='%23FFFFFF' transform='rotate(23 1171.5 470.5)'/%3E%3Crect x='1149' y='224' width='55' height='9' rx='4.5' fill='%23FF6B9A' transform='rotate(-31 1176.5 228.5)'/%3E%3Crect x='1144' y='647' width='64' height='10' rx='5' fill='%232EC4B6' transform='rotate(-3 1176 652)'/%3E%3Crect x='560' y='40' width='17' height='17' rx='2.8' fill='%23FFC53D' transform='rotate(-26 568.5 48.5)'/%3E%3Cpolygon points='69.5,702 83,729 56,729' fill='%23FFFFFF' transform='rotate(-20 69.5 715.5)'/%3E%3Crect x='424' y='705' width='16' height='16' rx='2.7' fill='%23FF6B9A' transform='rotate(32 432 713)'/%3E%3Cpolygon points='1212.5,300 1215.7,309.1 1225.3,309.3 1217.6,315.2 1220.4,324.4 1212.5,318.9 1204.6,324.4 1207.4,315.2 1199.7,309.3 1209.3,309.1' fill='%232EC4B6' transform='rotate(-30 1212.5 313.5)'/%3E%3Crect x='229' y='48' width='36' height='6' rx='3' fill='%23FFC53D' transform='rotate(26 247 51)'/%3E%3Crect x='537' y='704' width='46' height='7' rx='3.5' fill='%23FFFFFF' transform='rotate(37 560 707.5)'/%3E%3Cellipse cx='390.5' cy='703.5' rx='8.5' ry='8.5' fill='%23FF6B9A' transform='rotate(-25 390.5 703.5)'/%3E%3Crect x='1266' y='52' width='19' height='19' rx='3.2' fill='%232EC4B6' transform='rotate(34 1275.5 61.5)'/%3E%3Cpolygon points='1123,421 1131,437 1115,437' fill='%23FFC53D' transform='rotate(17 1123 429)'/%3E%3Cpolygon points='911,29 923,53 899,53' fill='%23FFFFFF' transform='rotate(-34 911 41)'/%3E%3Cpolygon points='658.5,705 666,720 651,720' fill='%23FF6B9A' transform='rotate(32 658.5 712.5)'/%3E%3Cpolygon points='1176.5,378 1187,399 1166,399' fill='%232EC4B6' transform='rotate(-15 1176.5 388.5)'/%3E%3Cellipse cx='1115' cy='255' rx='9' ry='9' fill='%23FFC53D' transform='rotate(11 1115 255)'/%3E%3Cpolygon points='1184.5,527 1196,550 1173,550' fill='%23FFFFFF' transform='rotate(1 1184.5 538.5)'/%3E%3Crect x='291' y='38' width='44' height='7' rx='3.5' fill='%23FF6B9A' transform='rotate(8 313 41.5)'/%3E%3Crect x='706' y='716' width='62' height='10' rx='5' fill='%232EC4B6' transform='rotate(5 737 721)'/%3E%3C/svg%3E");
}
[data-decor="confetti"] .mini.content::before {
  content: ""; --confetti: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolygon points='1280,34 1291,56 1269,56' fill='%233B5BDB' transform='rotate(34 1280 45)'/%3E%3Cellipse cx='1178' cy='48' rx='11' ry='11' fill='%23FFC53D' transform='rotate(-16 1178 48)'/%3E%3Cpolygon points='1106,55 1108.6,62.4 1116.5,62.6 1110.2,67.4 1112.5,74.9 1106,70.4 1099.5,74.9 1101.8,67.4 1095.5,62.6 1103.4,62.4' fill='%23FF6B9A' transform='rotate(9 1106 66)'/%3E%3Cellipse cx='1243.5' cy='49.5' rx='11.5' ry='11.5' fill='%232EC4B6' transform='rotate(-2 1243.5 49.5)'/%3E%3Cellipse cx='1079' cy='37' rx='13' ry='13' fill='%233B5BDB' transform='rotate(37 1079 37)'/%3E%3Cpolygon points='1132,18 1144,42 1120,42' fill='%23FFC53D' transform='rotate(21 1132 30)'/%3E%3Cpolygon points='1211.5,14 1213.3,19.1 1218.6,19.2 1214.4,22.4 1215.9,27.6 1211.5,24.5 1207.1,27.6 1208.6,22.4 1204.4,19.2 1209.7,19.1' fill='%23FF6B9A' transform='rotate(35 1211.5 21.5)'/%3E%3Crect x='1134' y='62' width='16' height='16' rx='2.7' fill='%233B5BDB' transform='rotate(13 1142 70)'/%3E%3C/svg%3E");
}
/* бохо: арки и солнце */
[data-decor="arches"] .mini.title::before {
  content: ""; left: 81.6%; top: 13.3%; width: 15%; height: 74.7%; border-radius: 7.5cqi 7.5cqi 0 0; background: var(--s-soft);
}
[data-decor="arches"] .mini.title::after {
  content: ""; left: 83.9%; top: 17.3%; width: 10.5%; height: 70.7%; border-radius: 5.25cqi 5.25cqi 0 0;
  background: radial-gradient(circle 3.375cqi at 50% 70.8%, var(--s-accent) 96%, transparent) var(--s-accent2);
}
[data-decor="arches"] .mini.section::before {
  content: ""; left: 81.25%; top: 16%; width: 15%; height: 100%; box-sizing: border-box;
  border: 1.5px solid var(--s-on); border-bottom: 0; border-radius: 7.5cqi 7.5cqi 0 0;
}
[data-decor="arches"] .mini.section::after {
  content: ""; left: 83.5%; top: 20%; width: 10.5%; height: 100%; border-radius: 5.25cqi 5.25cqi 0 0;
  background: radial-gradient(circle 3.375cqi at 50% 44.7%, var(--s-soft) 96%, transparent) var(--s-accent2);
}
[data-decor="arches"] .mini.content::before {
  content: ""; left: 89.1%; top: 2%; width: 4.5%; height: 10%; border-radius: 2.25cqi 2.25cqi 0 0; background: var(--s-accent2);
}
[data-decor="arches"] .mini.content::after {
  content: ""; left: 85%; top: 4%; width: 2.7%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent);
}
/* узоры по координатам из slides.py: SVG-маска на весь слайд, цвет — фон псевдоэлемента */
:is([data-decor="circuit"], [data-decor="blueprint"], [data-decor="hex"], [data-decor="snow"], [data-decor="grid"]) .mini::before,
:is([data-decor="circuit"], [data-decor="blueprint"], [data-decor="hex"], [data-decor="snow"], [data-decor="grid"]) .mini::after {
  -webkit-mask: var(--m) 0 0 / 100% 100% no-repeat; mask: var(--m) 0 0 / 100% 100% no-repeat;
}
/* технологии: дорожки микросхемы */
[data-decor="circuit"] .mini.title::before { content: ""; inset: 0; background: var(--s-accent2); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolyline points='1340,120 1170,120 1170,230 1110,230' fill='none' stroke='black' stroke-width='4.4'/%3E%3Ccircle cx='1110' cy='230' r='9' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolyline points='1340,440 1150,440' fill='none' stroke='black' stroke-width='4.4'/%3E%3Ccircle cx='1150' cy='440' r='9' fill='none' stroke='black' stroke-width='4.4'/%3E%3C/svg%3E"); }
[data-decor="circuit"] .mini.title::after { content: ""; inset: 0; background: var(--s-accent); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolyline points='1340,200 1240,200 1240,350' fill='none' stroke='black' stroke-width='4.4'/%3E%3Ccircle cx='1240' cy='350' r='9' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolyline points='1210,440 1210,560 1130,560' fill='none' stroke='black' stroke-width='4.4'/%3E%3Ccircle cx='1130' cy='560' r='9' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolyline points='780,760 780,695 960,695' fill='none' stroke='black' stroke-width='4.4'/%3E%3Ccircle cx='960' cy='695' r='9' fill='none' stroke='black' stroke-width='4.4'/%3E%3C/svg%3E"); }
[data-decor="circuit"] .mini.section::before { content: ""; inset: 0; background: var(--s-on); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolyline points='1340,100 1180,100 1180,220' fill='none' stroke='black' stroke-width='4.4'/%3E%3Ccircle cx='1180' cy='220' r='9' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolyline points='1340,300 1230,300 1230,460 1120,460' fill='none' stroke='black' stroke-width='4.4'/%3E%3Ccircle cx='1120' cy='460' r='9' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolyline points='1340,620 1160,620' fill='none' stroke='black' stroke-width='4.4'/%3E%3Ccircle cx='1160' cy='620' r='9' fill='none' stroke='black' stroke-width='4.4'/%3E%3C/svg%3E"); }
[data-decor="circuit"] .mini.content::before { content: ""; inset: 0; background: var(--s-accent2); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolyline points='1340,35 1230,35 1230,72' fill='none' stroke='black' stroke-width='4.4'/%3E%3Ccircle cx='1230' cy='72' r='9' fill='none' stroke='black' stroke-width='4.4'/%3E%3C/svg%3E"); }
[data-decor="circuit"] .mini.content::after { content: ""; inset: 0; background: var(--s-accent); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolyline points='1340,62 1275,62' fill='none' stroke='black' stroke-width='4.4'/%3E%3Ccircle cx='1275' cy='62' r='9' fill='none' stroke='black' stroke-width='4.4'/%3E%3C/svg%3E"); }
/* чертёж: сетка, на титульном — окружность с осями и размерная линия */
[data-decor="blueprint"] .mini:not(.quote):not(.has-photo) {
  --grid: color-mix(in srgb, var(--s-text) 14%, transparent);
  background:
    linear-gradient(90deg, var(--grid) 1px, transparent 0) 0 0 / 3.75% 6.667%,
    linear-gradient(var(--grid) 1px, transparent 0) 0 0 / 3.75% 6.667%,
    var(--s-bg);
}
[data-decor="blueprint"] .mini.content { --grid: color-mix(in srgb, var(--s-text) 10%, transparent); }
[data-decor="blueprint"] .mini.section:not(.has-photo) { --grid: color-mix(in srgb, var(--s-on) 14%, transparent); background-color: var(--s-accent); }
[data-decor="blueprint"] .mini.title::before { content: ""; inset: 0; background: var(--s-accent2); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Ccircle cx='1175' cy='260' r='125' fill='none' stroke='black' stroke-width='3.3'/%3E%3Cpath d='M1025 260L1325 260M1175 110L1175 410' fill='none' stroke='black' stroke-width='2.2' stroke-dasharray='8 6'/%3E%3Cpath d='M110 695L510 695M110 685L110 705M510 685L510 705' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E"); }
[data-decor="blueprint"] .mini.title::after {
  content: ""; left: 87.4%; top: 33.3%; width: 1.5%; aspect-ratio: 1; border-radius: 50%; background: var(--s-accent);
}
/* соты */
[data-decor="hex"] .mini.title::before { content: ""; inset: 0; background: var(--s-soft); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolygon points='808.1,232 866.9,232 896.2,282.4 866.9,332.8 808.1,332.8 778.8,282.4' /%3E%3Cpolygon points='901.9,286.1 960.6,286.1 990,336.5 960.6,386.9 901.9,386.9 872.5,336.5' /%3E%3Cpolygon points='901.9,394.4 960.6,394.4 990,444.8 960.6,495.1 901.9,495.1 872.5,444.8' /%3E%3Cpolygon points='995.6,123.8 1054.4,123.8 1083.8,174.1 1054.4,224.5 995.6,224.5 966.2,174.1' /%3E%3Cpolygon points='1089.4,286.1 1148.1,286.1 1177.5,336.5 1148.1,386.9 1089.4,386.9 1060,336.5' /%3E%3Cpolygon points='1183.1,123.8 1241.9,123.8 1271.2,174.1 1241.9,224.5 1183.1,224.5 1153.8,174.1' /%3E%3C/svg%3E"); }
[data-decor="hex"] .mini.title::after { content: ""; inset: 0; background: var(--s-accent); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolygon points='808.1,340.3 866.9,340.3 896.2,390.6 866.9,441 808.1,441 778.8,390.6' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolygon points='901.9,177.9 960.6,177.9 990,228.3 960.6,278.6 901.9,278.6 872.5,228.3' /%3E%3Cpolygon points='995.6,232 1054.4,232 1083.8,282.4 1054.4,332.8 995.6,332.8 966.2,282.4' /%3E%3Cpolygon points='995.6,340.3 1054.4,340.3 1083.8,390.6 1054.4,441 995.6,441 966.2,390.6' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolygon points='1089.4,177.9 1148.1,177.9 1177.5,228.3 1148.1,278.6 1089.4,278.6 1060,228.3' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolygon points='1183.1,232 1241.9,232 1271.2,282.4 1241.9,332.8 1183.1,332.8 1153.8,282.4' /%3E%3C/svg%3E"); }
[data-decor="hex"] .mini.section::before { content: ""; inset: 0; background: var(--s-on); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolygon points='1096.5,73 1143.5,73 1167,113.3 1143.5,153.6 1096.5,153.6 1073,113.3' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolygon points='1171.5,202.9 1218.5,202.9 1242,243.2 1218.5,283.5 1171.5,283.5 1148,243.2' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolygon points='1246.5,159.6 1293.5,159.6 1317,199.9 1293.5,240.2 1246.5,240.2 1223,199.9' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolygon points='1096.5,419.4 1143.5,419.4 1167,459.7 1143.5,500 1096.5,500 1073,459.7' fill='none' stroke='black' stroke-width='4.4'/%3E%3Cpolygon points='1171.5,462.7 1218.5,462.7 1242,503 1218.5,543.3 1171.5,543.3 1148,503' fill='none' stroke='black' stroke-width='4.4'/%3E%3C/svg%3E"); }
[data-decor="hex"] .mini.section::after { content: ""; inset: 0; background: var(--s-accent2); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolygon points='1171.5,116.3 1218.5,116.3 1242,156.6 1218.5,196.9 1171.5,196.9 1148,156.6' /%3E%3Cpolygon points='1246.5,332.8 1293.5,332.8 1317,373.1 1293.5,413.4 1246.5,413.4 1223,373.1' /%3E%3C/svg%3E"); }
[data-decor="hex"] .mini.content::before { content: ""; inset: 0; background: var(--s-accent); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolygon points='1169.1,13.3 1188.9,13.3 1198.7,30.2 1188.9,47.1 1169.1,47.1 1159.3,30.2' /%3E%3Cpolygon points='1232.1,13.3 1251.9,13.3 1261.7,30.2 1251.9,47.1 1232.1,47.1 1222.3,30.2' fill='none' stroke='black' stroke-width='4.4'/%3E%3C/svg%3E"); }
[data-decor="hex"] .mini.content::after { content: ""; inset: 0; background: var(--s-soft); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpolygon points='1200.6,31.4 1220.4,31.4 1230.2,48.4 1220.4,65.3 1200.6,65.3 1190.8,48.4' /%3E%3C/svg%3E"); }
/* зима: снежинки, на титульном — сугробы */
[data-decor="snow"] .mini.title::before { content: ""; inset: 0; background: var(--s-accent2); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpath d='M90 90L135 90M117 90L128 80.7M117 90L128 99.3M90 90L112.5 129M103.5 113.4L117 118.3M103.5 113.4L101 127.6M90 90L67.5 129M76.5 113.4L79 127.6M76.5 113.4L63 118.3M90 90L45 90M63 90L52 99.3M63 90L52 80.7M90 90L67.5 51M76.5 66.6L63 61.7M76.5 66.6L79 52.4M90 90L112.5 51M103.5 66.6L101 52.4M103.5 66.6L117 61.7' fill='none' stroke='black' stroke-width='5.2' stroke-linecap='round'/%3E%3Cpath d='M230 55L252.5 55M243.5 55L249 50.4M243.5 55L249 59.6M230 55L241.2 74.5M236.7 66.7L243.5 69.2M236.7 66.7L235.5 73.8M230 55L218.8 74.5M223.2 66.7L224.5 73.8M223.2 66.7L216.5 69.2M230 55L207.5 55M216.5 55L211 59.6M216.5 55L211 50.4M230 55L218.7 35.5M223.2 43.3L216.5 40.8M223.2 43.3L224.5 36.2M230 55L241.2 35.5M236.7 43.3L235.5 36.2M236.7 43.3L243.5 40.8' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M1190 80L1240 80M1220 80L1232.3 69.7M1220 80L1232.3 90.3M1190 80L1215 123.3M1205 106L1220 111.5M1205 106L1202.2 121.7M1190 80L1165 123.3M1175 106L1177.8 121.7M1175 106L1160 111.5M1190 80L1140 80M1160 80L1147.7 90.3M1160 80L1147.7 69.7M1190 80L1165 36.7M1175 54L1160 48.5M1175 54L1177.8 38.3M1190 80L1215 36.7M1205 54L1202.2 38.3M1205 54L1220 48.5' fill='none' stroke='black' stroke-width='5.8' stroke-linecap='round'/%3E%3Cpath d='M1260 220L1285 220M1275 220L1281.1 214.9M1275 220L1281.1 225.1M1260 220L1272.5 241.7M1267.5 233L1275 235.7M1267.5 233L1266.1 240.9M1260 220L1247.5 241.7M1252.5 233L1253.9 240.9M1252.5 233L1245 235.7M1260 220L1235 220M1245 220L1238.9 225.1M1245 220L1238.9 214.9M1260 220L1247.5 198.3M1252.5 207L1245 204.3M1252.5 207L1253.9 199.1M1260 220L1272.5 198.3M1267.5 207L1266.1 199.1M1267.5 207L1275 204.3' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round'/%3E%3Cpath d='M1060 45L1080 45M1072 45L1076.9 40.9M1072 45L1076.9 49.1M1060 45L1070 62.3M1066 55.4L1072 57.6M1066 55.4L1064.9 61.7M1060 45L1050 62.3M1054 55.4L1055.1 61.7M1054 55.4L1048 57.6M1060 45L1040 45M1048 45L1043.1 49.1M1048 45L1043.1 40.9M1060 45L1050 27.7M1054 34.6L1048 32.4M1054 34.6L1055.1 28.3M1060 45L1070 27.7M1066 34.6L1064.9 28.3M1066 34.6L1072 32.4' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3Cpath d='M70 260L95 260M85 260L91.1 254.9M85 260L91.1 265.1M70 260L82.5 281.7M77.5 273L85 275.7M77.5 273L76.1 280.9M70 260L57.5 281.7M62.5 273L63.9 280.9M62.5 273L55 275.7M70 260L45 260M55 260L48.9 265.1M55 260L48.9 254.9M70 260L57.5 238.3M62.5 247L55 244.3M62.5 247L63.9 239.1M70 260L82.5 238.3M77.5 247L76.1 239.1M77.5 247L85 244.3' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round'/%3E%3Cpath d='M1250 440L1280 440M1268 440L1275.4 433.8M1268 440L1275.4 446.2M1250 440L1265 466M1259 455.6L1268 458.9M1259 455.6L1257.3 465M1250 440L1235 466M1241 455.6L1242.7 465M1241 455.6L1232 458.9M1250 440L1220 440M1232 440L1224.6 446.2M1232 440L1224.6 433.8M1250 440L1235 414M1241 424.4L1232 421.1M1241 424.4L1242.7 415M1250 440L1265 414M1259 424.4L1257.3 415M1259 424.4L1268 421.1' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M80 500L115 500M101 500L109.6 492.8M101 500L109.6 507.2M80 500L97.5 530.3M90.5 518.2L101 522M90.5 518.2L88.6 529.2M80 500L62.5 530.3M69.5 518.2L71.4 529.2M69.5 518.2L59 522M80 500L45 500M59 500L50.4 507.2M59 500L50.4 492.8M80 500L62.5 469.7M69.5 481.8L59 478M69.5 481.8L71.4 470.8M80 500L97.5 469.7M90.5 481.8L88.6 470.8M90.5 481.8L101 478' fill='none' stroke='black' stroke-width='4.0' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-decor="snow"] .mini.title::after { content: ""; inset: 0; background: #fff; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cellipse cx='150' cy='765' rx='250' ry='90'/%3E%3Cellipse cx='590' cy='775' rx='270' ry='80'/%3E%3Cellipse cx='990' cy='770' rx='230' ry='90'/%3E%3Cellipse cx='1270' cy='760' rx='190' ry='100'/%3E%3C/svg%3E"); }
[data-decor="snow"] .mini.section::before { content: ""; inset: 0; background: #fff; --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpath d='M1160 130L1215 130M1193 130L1206.5 118.7M1193 130L1206.5 141.3M1160 130L1187.5 177.6M1176.5 158.6L1193 164.6M1176.5 158.6L1173.4 175.9M1160 130L1132.5 177.6M1143.5 158.6L1146.6 175.9M1143.5 158.6L1127 164.6M1160 130L1105 130M1127 130L1113.5 141.3M1127 130L1113.5 118.7M1160 130L1132.5 82.4M1143.5 101.4L1127 95.4M1143.5 101.4L1146.6 84.1M1160 130L1187.5 82.4M1176.5 101.4L1173.4 84.1M1176.5 101.4L1193 95.4' fill='none' stroke='black' stroke-width='6.4' stroke-linecap='round'/%3E%3Cpath d='M1260 300L1285 300M1275 300L1281.1 294.9M1275 300L1281.1 305.1M1260 300L1272.5 321.7M1267.5 313L1275 315.7M1267.5 313L1266.1 320.9M1260 300L1247.5 321.7M1252.5 313L1253.9 320.9M1252.5 313L1245 315.7M1260 300L1235 300M1245 300L1238.9 305.1M1245 300L1238.9 294.9M1260 300L1247.5 278.3M1252.5 287L1245 284.3M1252.5 287L1253.9 279.1M1260 300L1272.5 278.3M1267.5 287L1266.1 279.1M1267.5 287L1275 284.3' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round'/%3E%3Cpath d='M1120 390L1150 390M1138 390L1145.4 383.8M1138 390L1145.4 396.2M1120 390L1135 416M1129 405.6L1138 408.9M1129 405.6L1127.3 415M1120 390L1105 416M1111 405.6L1112.7 415M1111 405.6L1102 408.9M1120 390L1090 390M1102 390L1094.6 396.2M1102 390L1094.6 383.8M1120 390L1105 364M1111 374.4L1102 371.1M1111 374.4L1112.7 365M1120 390L1135 364M1129 374.4L1127.3 365M1129 374.4L1138 371.1' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round'/%3E%3Cpath d='M1230 540L1275 540M1257 540L1268 530.7M1257 540L1268 549.3M1230 540L1252.5 579M1243.5 563.4L1257 568.3M1243.5 563.4L1241 577.6M1230 540L1207.5 579M1216.5 563.4L1219 577.6M1216.5 563.4L1203 568.3M1230 540L1185 540M1203 540L1192 549.3M1203 540L1192 530.7M1230 540L1207.5 501M1216.5 516.6L1203 511.7M1216.5 516.6L1219 502.4M1230 540L1252.5 501M1243.5 516.6L1241 502.4M1243.5 516.6L1257 511.7' fill='none' stroke='black' stroke-width='5.2' stroke-linecap='round'/%3E%3Cpath d='M1100 660L1120 660M1112 660L1116.9 655.9M1112 660L1116.9 664.1M1100 660L1110 677.3M1106 670.4L1112 672.6M1106 670.4L1104.9 676.7M1100 660L1090 677.3M1094 670.4L1095.1 676.7M1094 670.4L1088 672.6M1100 660L1080 660M1088 660L1083.1 664.1M1088 660L1083.1 655.9M1100 660L1090 642.7M1094 649.6L1088 647.4M1094 649.6L1095.1 643.3M1100 660L1110 642.7M1106 649.6L1104.9 643.3M1106 649.6L1112 647.4' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round'/%3E%3C/svg%3E"); }
[data-decor="snow"] .mini.content::before { content: ""; inset: 0; background: var(--s-accent2); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cpath d='M1255 42L1280 42M1270 42L1276.1 36.9M1270 42L1276.1 47.1M1255 42L1267.5 63.7M1262.5 55L1270 57.7M1262.5 55L1261.1 62.9M1255 42L1242.5 63.7M1247.5 55L1248.9 62.9M1247.5 55L1240 57.7M1255 42L1230 42M1240 42L1233.9 47.1M1240 42L1233.9 36.9M1255 42L1242.5 20.3M1247.5 29L1240 26.3M1247.5 29L1248.9 21.1M1255 42L1267.5 20.3M1262.5 29L1261.1 21.1M1262.5 29L1270 26.3' fill='none' stroke='black' stroke-width='2.9' stroke-linecap='round'/%3E%3Cpath d='M1185 30L1199 30M1193.4 30L1196.8 27.1M1193.4 30L1196.8 32.9M1185 30L1192 42.1M1189.2 37.3L1193.4 38.8M1189.2 37.3L1188.4 41.7M1185 30L1178 42.1M1180.8 37.3L1181.6 41.7M1180.8 37.3L1176.6 38.8M1185 30L1171 30M1176.6 30L1173.2 32.9M1176.6 30L1173.2 27.1M1185 30L1178 17.9M1180.8 22.7L1176.6 21.2M1180.8 22.7L1181.6 18.3M1185 30L1192 17.9M1189.2 22.7L1188.4 18.3M1189.2 22.7L1193.4 21.2' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M1200 75L1210 75M1206 75L1208.5 72.9M1206 75L1208.5 77.1M1200 75L1205 83.7M1203 80.2L1206 81.3M1203 80.2L1202.4 83.3M1200 75L1195 83.7M1197 80.2L1197.6 83.3M1197 80.2L1194 81.3M1200 75L1190 75M1194 75L1191.5 77.1M1194 75L1191.5 72.9M1200 75L1195 66.3M1197 69.8L1194 68.7M1197 69.8L1197.6 66.7M1200 75L1205 66.3M1203 69.8L1202.4 66.7M1203 69.8L1206 68.7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* тетрадь в клетку: сетка и поля справа, на титульном — фигуры */
[data-decor="grid"] .mini:not(.quote):not(.has-photo) {
  --grid: #D3DEF0;
  background:
    linear-gradient(90deg, transparent 94.75%, var(--s-accent2) 0 calc(94.75% + 1px), transparent 0),
    linear-gradient(90deg, var(--grid) 1px, transparent 0) 0 0 / 3% 5.333%,
    linear-gradient(var(--grid) 1px, transparent 0) 0 0 / 3% 5.333%,
    var(--s-bg);
}
[data-decor="grid"] .mini.section:not(.has-photo) {
  --grid: color-mix(in srgb, var(--s-on) 20%, transparent);
  background:
    linear-gradient(90deg, var(--grid) 1px, transparent 0) 0 0 / 3% 5.333%,
    linear-gradient(var(--grid) 1px, transparent 0) 0 0 / 3% 5.333%,
    var(--s-accent);
}
[data-decor="grid"] .mini.title::before { content: ""; inset: 0; background: var(--s-accent); --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1333.33 750'%3E%3Cg fill='none' stroke='black' stroke-width='4.4'%3E%3Ccircle cx='1150' cy='170' r='60'/%3E%3Cpolygon points='1100,280 1100,390 1230,390'/%3E%3Crect x='1115' y='440' width='80' height='80'/%3E%3C/g%3E%3C/svg%3E"); }
/* карточки на сетке залиты фоном — линии под текстом не видны (как в файле) */
:is([data-decor="grid"], [data-decor="blueprint"]) .mini :is(.mcard, .col, .soft-box) { background: var(--s-bg); }

/* ----- карточки: тень, «стекло», пунктир ----- */
[data-cards="shadow"] .mini :is(.mcard, .col, .soft-box) { box-shadow: 0 2px 6px rgb(0 0 0 / .16); }
[data-cards="glass"] .mini :is(.mcard, .col, .soft-box) {
  background: rgb(255 255 255 / .6); border: 1px solid #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .08);
}
[data-cards="dashed"] .mini :is(.mcard, .col, .soft-box) { border: 1px dashed var(--s-accent); }

/* ----- титульный слайд: название на карточке (card) и цветная верхняя часть (top) ----- */
[data-title="card"] .mini.title:not(.has-photo) { padding: 6% 11.25% 5.6%; }
[data-title="card"] .mini.title:not(.has-photo) .mini-text {
  flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  padding: 0 6%; border-radius: 6px; background: var(--s-soft); box-shadow: 0 4px 12px rgb(0 0 0 / .2);
}
[data-title="top"] .mini.title:not(.has-photo) { background: linear-gradient(var(--s-accent) 66.7%, var(--s-bg) 0); }
[data-title="top"] .mini.title:not(.has-photo) h4 {
  position: absolute; left: 8.25%; right: 19.75%; bottom: 43.3%; margin: 0; color: var(--s-on);
}
[data-title="top"] .mini.title:not(.has-photo) p { position: absolute; left: 8.25%; right: 8.25%; top: 72%; }
/* справа от названия — украшения: как в файле, название шириной 9.6″ и на них не заходит */
:is([data-decor="arches"], [data-decor="circuit"], [data-decor="sunrise"], [data-decor="blueprint"], [data-decor="grid"]) .mini.title:not(.has-photo) {
  padding-right: 19.75%;
}
/* слайды с фото в файле без украшений (кроме рамок) — так же и в превью */
[data-decor]:not([data-decor="frame"]):not([data-title="masthead"]) .mini.title.has-photo::before,
[data-decor]:not([data-decor="frame"]):not([data-title="masthead"]) .mini.title.has-photo::after,
[data-decor]:not([data-decor="frame"]) .mini.section.has-photo::before,
[data-decor]:not([data-decor="frame"]) .mini.section.has-photo::after { content: none; }
[data-decor="notebook"] .mini.title.has-photo, [data-decor="stars"] .mini.title.has-photo { background: var(--s-bg); }
[data-decor="notebook"] .mini.section.has-photo, [data-decor="stars"] .mini.section.has-photo { background: var(--s-accent); }
[data-title="split"] .mini.title.has-photo { background: var(--s-accent); }

@media (max-width: 760px) {
  /* семь разделов, язык, тема и профиль в нижнем меню не помещаются — разделы листаются вбок */
  .nav { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; min-width: 68px; }
  .templates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-page { padding: 18px 14px; }
  .game-stage { padding: 18px 14px; }
  .sound-btn { top: 12px; right: 12px; }
  .game-question { font-size: 20px; }
  .quiz-options, .tf-options { grid-template-columns: 1fr; }
  .game-feedback { flex-direction: column; align-items: stretch; }
  .cw { --cw-size: 26px; }
  /* на телефоне панель — это нижнее меню: кнопку прячем, панель всегда на месте */
  .sidebar-toggle { display: none; }
}

/* ================= Админ-панель (/admin) ================= */
/* Цвета графиков: один ряд данных — один цвет (#22C55E, проверен на фоне карточки: контраст и яркость в норме);
   статусы — только с подписью рядом: жёлтый — лимит почти исчерпан / предупреждение, красный — исчерпан / ошибка */
.admin {
  --series: #22C55E; --series-hover: #4ADE80;
  --chart-grid: rgba(255, 255, 255, .07); --chart-axis: rgba(255, 255, 255, .2);
  --good: #0CA30C; --warning: #FAB219; --critical: #D03B3B;
  max-width: 1180px; margin: 0 auto; padding: 24px 32px 48px;
}
.admin-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.admin-head .brand { padding: 0; }
.admin-tag { padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 600; }
.admin-head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-who { color: var(--muted); font-size: 14px; }
.admin-alert {
  margin-bottom: 20px; padding: 14px 18px; border-radius: var(--radius); line-height: 1.55;
  border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent); background: color-mix(in srgb, var(--warning) 9%, transparent);
}
.admin code { font-family: "Google Sans Code", ui-monospace, monospace; font-size: 13px; }
.admin-main { display: flex; flex-direction: column; gap: 20px; transition: opacity .2s; }
.admin-main.is-loading { opacity: .6; }  /* обновление: прежние цифры видны, пока придут новые */

/* главные цифры */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.kpi-label { color: var(--muted); font-size: 14px; }
.kpi-value { font-size: 34px; font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.kpi-delta { color: var(--muted); font-size: 13px; }
.kpi-delta.good { color: var(--good); }

/* графики */
.admin-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; }
.chart-card { margin: 0; padding: 18px 20px; min-width: 0; }
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.chart-head h2, .section-head h2 { font-size: 17px; letter-spacing: -.01em; margin: 0; }
.chart-head .muted, .section-head .muted { font-size: 13px; }
.link-btn { border: 0; background: none; padding: 4px 8px; color: var(--accent); font-size: 13px; font-weight: 600; border-radius: 6px; }
.link-btn:hover { background: var(--accent-soft); }
.chart { min-height: 220px; }
.col-chart { display: block; overflow: visible; fill: none; stroke: none; }  /* у значков приложения svg 20×20 с обводкой — здесь свой размер и без неё */
.col-chart .grid, .col-chart .baseline { stroke-width: 1; }
.col-chart .grid { stroke: var(--chart-grid); }
.col-chart .baseline { stroke: var(--chart-axis); }
.col-chart .tick, .col-chart .day { fill: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.col-chart .day.today { fill: var(--text); font-weight: 600; }
.col-chart .cap { fill: var(--text); font-size: 12px; font-weight: 600; }
.col-chart .bar { fill: var(--series); transition: fill .15s; }
.col-chart .bar.on { fill: var(--series-hover); }  /* наведённый столбик светлеет */
.col-chart .hit { fill: transparent; outline: none; }
.col-chart .hit:focus-visible { stroke: var(--accent); stroke-width: 1.5; }
.chart-tip {
  position: absolute; z-index: 50; pointer-events: none; transform: translate(-50%, calc(-100% - 10px));
  display: flex; flex-direction: column; align-items: center; padding: 7px 12px; border-radius: 9px; line-height: 1.3; white-space: nowrap;
  background: #0B0816; border: 1px solid var(--border); box-shadow: var(--shadow);
}
.chart-tip b { font-size: 16px; }
.chart-tip span { color: var(--muted); font-size: 12px; }

/* по разделам: полоска — доля от самого частого раздела, число — на конце */
.bar-list { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: 14px; }
.bar-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 12px; }
.bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--series); }
.bar-value { min-width: 2.5em; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.empty-note { color: var(--muted); font-size: 14px; padding: 14px 0; text-align: center; list-style: none; }

/* пользователи */
.admin-section { padding: 18px 20px; }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.section-head input[type="search"] {
  width: 280px; max-width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); outline: none;
}
.section-head input[type="search"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table .nowrap { white-space: nowrap; }
.admin-table.compact td, .admin-table.compact th { padding: 7px 10px; }
.admin-table tr.is-blocked td { opacity: .65; }
.person { display: flex; align-items: center; gap: 10px; min-width: 230px; }
.person b { display: block; font-size: 14px; }
.person small { display: block; color: var(--muted); font-size: 12px; }
.person-avatar {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex-shrink: 0; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent); font-weight: 700;
}
.person-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tag { display: inline-block; margin: 4px 6px 0 0; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--accent-soft); color: var(--accent); }
.tag.danger { background: color-mix(in srgb, var(--critical) 18%, transparent); color: var(--text); }
.tag.muted { background: var(--surface-2); color: var(--muted); }
.usage-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.meter { display: block; width: 110px; height: 6px; margin-top: 6px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--series); }
.meter.warning > span { background: var(--warning); }
.meter.critical > span { background: var(--critical); }
.limit-form { display: flex; gap: 6px; align-items: center; }
.limit-form input {
  width: 84px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg);
  font-variant-numeric: tabular-nums; outline: none;
}
.limit-form input:focus { border-color: var(--accent); }
.danger-btn { border: 1px solid color-mix(in srgb, var(--critical) 65%, transparent); background: transparent; color: var(--text); }
.danger-btn:hover { background: color-mix(in srgb, var(--critical) 16%, transparent); }

/* журнал: значок-точка цвета статуса и подпись рядом — не только цвет */
.log-list { list-style: none; margin: 0; padding: 0; }
.log { display: grid; grid-template-columns: 150px 120px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.log:last-child { border-bottom: 0; }
.log-level { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.log-level::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex-shrink: 0; }
.log.critical .log-level::before { background: var(--critical); }
.log time { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.log code { font-size: 12px; color: var(--text); word-break: break-word; }
.admin-foot { color: var(--muted); font-size: 13px; margin: 4px 0 0; line-height: 1.6; }

@media (max-width: 960px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .admin { padding: 16px; }
  .kpis { gap: 10px; }
  .kpi-value { font-size: 26px; }
  .log { grid-template-columns: 1fr; gap: 2px; }
  .admin-head-right { margin-left: 0; width: 100%; }
}

/* ================= Аккаунт: настройки и помощь в боковой панели, тариф, меню профиля, окно аккаунта ================= */
:root { --warn: #FAB219; --critical: #D03B3B; }

/* «Настройки» и «Помощь» — как пункты меню, но тише: над тарифом и профилем */
.side-links { display: flex; flex-direction: column; gap: 2px; margin-top: -12px; }
.side-link {
  display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--muted); font-weight: 500; font-size: 14px; text-align: left;
  transition: background .15s, color .15s;
}
.side-link svg { width: 18px; height: 18px; color: var(--accent); }
.side-link:hover { background: var(--hover-glass); color: var(--text); }
.side-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* значок тарифа: бесплатный — спокойный, PRO — фиолетовый, MAX — золотой */
.plan-badge {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
  background: var(--surface-2); color: var(--muted); border: 1px solid var(--border);
}
.plan-badge[data-plan="pro"] { background: var(--accent-soft); color: var(--accent-hover); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.plan-badge[data-plan="admin"] { background: rgba(22, 163, 74, .16); color: #86EFAC; border-color: rgba(74, 222, 128, .4); }
.plan-badge[data-plan="max"] {
  background: linear-gradient(135deg, rgba(242, 183, 5, .2), rgba(21, 128, 61, .18)); color: #FDE68A;
  border-color: rgba(242, 183, 5, .45);
}

/* полоска «сколько израсходовано»: обычный цвет, от 80% — жёлтый, всё — красный (рядом всегда цифры) */
.meter-line { display: block; height: 6px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.meter-line > span { display: block; height: 100%; border-radius: inherit; background: var(--primary); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.meter-line.warning > span { background: var(--warn); }
.meter-line.critical > span { background: var(--critical); }

/* «Сменить тариф» — как кнопка Upgrade в Gemini: плоская капсула, слева белый логотип UaqytAI, Google Sans 500,
   при наведении — лёгкое высветление поверх цвета (без свечения и подпрыгивания). Цвет — зелёный, белая надпись
   (выбор пользователя); #15803D даёт белому тексту контраст выше 5:1 */
.upgrade-btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px 0 14px; border: 0; border-radius: 999px; white-space: nowrap; flex-shrink: 0;  /* не сжимается — текст всегда внутри */
  background: #15803D; color: #FFFFFF; font: 500 14px/1 var(--font-display); letter-spacing: .01em;
  transition: background-color .15s;
}
.upgrade-btn::before {  /* слой состояния, как у кнопок Gemini */
  content: ""; position: absolute; inset: 0; z-index: -1; background: #FFFFFF; opacity: 0; transition: opacity .15s;
}
.upgrade-btn:hover::before { opacity: .1; }
.upgrade-btn:active::before { opacity: .16; }
.upgrade-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.upgrade-btn .upgrade-logo { width: 20px; height: 20px; display: block; flex-shrink: 0; }  /* логотип — белым */
.upgrade-btn.small { height: 32px; padding: 0 14px 0 10px; gap: 6px; font-size: 13px; }
.upgrade-btn.small .upgrade-logo { width: 16px; height: 16px; }
/* справа вверху рабочей области — поверх разделов, при прокрутке остаётся на месте: остаток токенов и «Сменить тариф» */
.top-actions { position: absolute; z-index: 6; top: 22px; right: 28px; display: flex; align-items: center; gap: 8px; }
/* остаток токенов — спокойная капсула рядом с «Сменить тариф»: от 80% лимита — жёлтая, всё потрачено — красная */
.token-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text);
  font: 500 14px/1 var(--font-display); white-space: nowrap; cursor: pointer; transition: background-color .15s;
}
.token-pill:hover { background: var(--surface-2); }
.token-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.token-pill svg { width: 18px; height: 18px; color: var(--accent); }
.token-pill .tp-short { display: none; }  /* короткая надпись — только на узком телефоне */
.token-pill.warning, .token-pill.warning svg { color: var(--warn); }
.token-pill.critical, .token-pill.critical svg { color: #F87171; }  /* светлее --critical: на тёмном фоне контраст выше 4.5:1 */

/* профиль слева внизу — кнопка: открывает меню аккаунта */
button.user {
  width: 100%; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: transparent;
  color: inherit; text-align: left; font: inherit;
}
button.user:hover .user-name { color: var(--accent-hover); }
button.user:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 10px; }
.user-info { display: flex; flex-direction: column; }
.user-chevron { width: 16px; height: 16px; color: var(--muted); }

/* меню аккаунта: над профилем; на телефоне — над нижним меню */
.account-menu {
  position: fixed; z-index: 40; left: 12px; bottom: 76px; width: 268px; padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, .5);
  animation: menu-in .18s cubic-bezier(.2, .8, .2, 1);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.sidebar-closed .account-menu { left: 76px; }
.am-head { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
.am-who { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.am-who b, .am-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-who small { color: var(--muted); font-size: 12px; }
/* тариф в меню: значок сверху, «Сменить тариф» — на всю ширину ниже, чтобы надпись всегда помещалась в кнопку
   (рядом со значком «Администратор» кнопке не хватало места) */
.am-plan {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; margin-bottom: 4px;
  border-radius: 12px; background: var(--surface-2);
}
.am-plan .plan-badge { align-self: flex-start; }
.am-plan .upgrade-btn { width: 100%; }
.account-menu > button, .account-menu > a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--text); font-size: 14px; text-decoration: none; text-align: left;
}
.account-menu > button svg, .account-menu > a svg { width: 17px; height: 17px; color: var(--accent); }
.account-menu > button:hover, .account-menu > a:hover, .account-menu > :focus-visible { background: var(--hover-glass); outline: none; }
.account-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }

/* раздел не входит в тариф: метка у пункта меню и пояснение над формой */
.pro-tag {
  margin-left: auto; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  background: var(--accent-soft); color: var(--accent-hover);
}
.mode-tab .pro-tag { margin-left: 4px; }
.plan-lock {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 10px; font-size: 14px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.plan-cta { margin-top: 10px; }

/* ===== окно аккаунта =====
   Имена — acc-…, не ad-…: блокировщики рекламы (списки EasyList) прячут .ad-tabs, .ad-body, .ad-panel, .ad-section
   на любом сайте — окно оставалось пустым. Классы вида ad-…, ads-…, banner… не используем нигде. */
.account-dialog {
  width: min(920px, calc(100vw - 32px)); height: min(680px, calc(100dvh - 48px)); max-width: none; max-height: none;
  padding: 0; border: 1px solid var(--border); border-radius: 18px; overflow: hidden;
  background: var(--surface); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.account-dialog[open] { animation: dialog-in .22s cubic-bezier(.2, .8, .2, 1); }
.account-dialog::backdrop { background: rgba(4, 2, 12, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.acc-layout { display: grid; grid-template-columns: 210px 1fr; height: 100%; }
.acc-tabs { display: flex; flex-direction: column; gap: 2px; padding: 20px 12px; background: var(--surface-2); border-right: 1px solid var(--border); }
.acc-tabs h2 { font-size: 17px; margin: 0 10px 14px; }
.acc-tabs button {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font-weight: 500; text-align: left; transition: background .15s, color .15s;
}
.acc-tabs button svg { width: 17px; height: 17px; color: var(--accent); }
.acc-tabs button:hover { background: var(--hover-glass); color: var(--text); }
.acc-tabs button.active { background: var(--accent-soft); color: var(--text); }
.acc-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.acc-body { position: relative; min-width: 0; min-height: 0; }
.acc-close { position: absolute; top: 14px; right: 14px; z-index: 2; }
.acc-menu, .acc-scrim { display: none; }  /* ☰ и затемнение — только на телефоне */
.acc-panel { height: 100%; overflow-y: auto; padding: 26px 30px 32px; outline: none; }
/* название вкладки стоит наверху, текст уходит под него — как в окнах Gemini; когда под шапкой есть текст, её отделяет
   черта. Шапка — во всю ширину и с отступом под крестик: раньше при прокрутке под крестиком оказывалась кнопка «Eng» */
.acc-head {  /* top — минус отступ панели: «прилипает» шапка к краю отступа, а не к краю окна */
  position: sticky; top: -26px; z-index: 1; margin: -26px -30px 14px; padding: 22px 70px 12px 30px;
  background: var(--surface); transition: box-shadow .2s;
}
.acc-panel.scrolled .acc-head { box-shadow: 0 1px 0 var(--border); }
.acc-head h3 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.acc-panel > .acc-sub { margin: -4px 0 18px; }
.acc-panel .small, .acc-panel small { font-size: 13px; }
.acc-section { padding: 18px 0; border-top: 1px solid var(--border); }
.acc-section:first-of-type { border-top: 0; padding-top: 4px; }
.acc-section h4 { margin: 0 0 10px; font-size: 15px; }
.acc-section > p.muted, .acc-form > p.muted { margin: -4px 0 12px; }
.acc-form { display: flex; flex-direction: column; gap: 14px; }
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.acc-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.acc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acc-field > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.acc-field input, .acc-field select, .acc-field textarea {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg);
  color: var(--text); outline: none; transition: border-color .15s, box-shadow .15s;
}
.acc-field input:focus, .acc-field select:focus, .acc-field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* списки окна аккаунта — как «таблетки» форм: скруглённое поле со стрелкой, меню в стиле Gemini (ниже, base-select) */
.acc-field select {
  -webkit-appearance: none; appearance: none; padding-right: 36px; border-radius: 12px; cursor: pointer;
  background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D94BA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
}
@supports (appearance: base-select) {
  .acc-field select { display: flex; align-items: center; justify-content: space-between; padding-right: 12px; }
}
/* строка «Настроек» как в Gemini: название слева, выбор справа — «таблетка» со своим меню, как «Класс» и «Язык»
   в формах (.pill-field: стрелка, тёмная скруглённая панель, галочка у выбранного). На узком экране выбор переносится
   под название */
.set-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 48px; padding: 4px 0; }
.set-row > label, .set-row > span { font-size: 14px; color: var(--text); cursor: default; }
.set-row .lang-switch { flex: none; width: 200px; }
.pill-field.set-pill { max-width: 100%; padding: 3px 4px; }
.set-pill select { max-width: 100%; text-overflow: ellipsis; }
.set-pill input { width: 210px; max-width: 100%; }
.set-row .pick-menu { max-width: min(340px, 100%); }
.acc-actions { display: flex; gap: 10px; justify-content: flex-end; }
.text-link { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 600; text-decoration: none; }
.text-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* переключатель вкл/выкл */
.switch-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; cursor: pointer; }
.switch-row > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.switch-row small { color: var(--muted); }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; flex-shrink: 0; width: 40px; height: 23px; border-radius: 999px; background: var(--border); transition: background .2s; }
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%;
  background: #FFFFFF; transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.switch-row input:checked + .switch { background: #16A34A; }
.switch-row input:checked + .switch::after { transform: translateX(17px); }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--accent); outline-offset: 2px; }

/* профиль */
.profile-card {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 18px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.user-avatar.big { width: 56px; height: 56px; font-size: 22px; }
.user-avatar.big svg { width: 26px; height: 26px; }
.profile-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.profile-who b { font-size: 16px; }
.profile-who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* тариф */
.plan-current { padding: 16px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.plan-current[data-plan="max"] { border-color: rgba(242, 183, 5, .35); }
.plan-current[data-plan="pro"] { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pc-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pc-status { color: var(--muted); font-size: 14px; }
.pc-meter-text { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; color: var(--muted); }
.pc-warn { margin: 12px 0 0; color: var(--warn); font-size: 14px; }
.plan-request {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 12px 16px;
  border-radius: 12px; background: color-mix(in srgb, var(--warn) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.plan-request p { margin: 0; font-size: 14px; }
/* подписка с автопродлением (app/billing.py): включено — зелёная рамка, отключено или остановлено — жёлтая */
.plan-sub {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 12px 16px;
  border-radius: 12px; background: color-mix(in srgb, #46C055 8%, transparent);
  border: 1px solid color-mix(in srgb, #46C055 35%, transparent);
}
.plan-sub[data-status="cancelled"], .plan-sub[data-status="stopped"] {
  background: color-mix(in srgb, var(--warn) 9%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
.plan-sub p { margin: 0; font-size: 14px; }
.plan-sub .pc-warn { margin-top: 6px; }
.plan-sub .btn { flex: none; }
/* окно перед оплатой: условия и галочка согласия на автопродление */
.pay-dialog p + p { margin-top: 10px; }
.pay-dialog .pay-warn { color: var(--warn); }
.pay-agree { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 14px; line-height: 20px; cursor: pointer; }
.pay-agree input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.pay-agree a { color: var(--accent); }
.gm-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.period-switch {
  display: inline-flex; gap: 2px; margin: 20px 0 14px; padding: 3px; border-radius: 12px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, .03);
}
.period-switch button {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font-weight: 600; font-size: 14px;
}
.period-switch button.active { background: var(--surface-2); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.save-tag { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(74, 222, 128, .16); color: var(--good); }
.plan-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }  /* 4 тарифа — сеткой 2×2 */
.plan-card {
  display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--border); transition: border-color .2s, box-shadow .2s;
}
.plan-card.featured { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.plan-card.wanted { box-shadow: 0 0 0 2px var(--accent), 0 10px 30px rgba(22, 163, 74, .25); }
.plan-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-popular { font-size: 11px; font-weight: 700; color: var(--accent-hover); }
.plan-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.plan-price b { font-size: 24px; letter-spacing: -.02em; }
.plan-price small { color: var(--muted); }
.plan-price em { flex-basis: 100%; font-style: normal; font-size: 12px; color: var(--muted); }
.plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13px; flex: 1; }
.plan-list li { display: flex; gap: 8px; line-height: 1.4; }
.plan-list li.yes { color: var(--text); }
.plan-list li.no { color: var(--muted); opacity: .75; }
.plan-card .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; padding: 10px 12px; font-size: 14px; }

/* безопасность */
.sec-row { display: flex; align-items: center; gap: 12px; }
.sec-icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; flex-shrink: 0; }
.sec-icon svg { width: 20px; height: 20px; stroke: none; }
.sec-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sec-who small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.sec-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 0; font-size: 14px; }
.sec-facts dt { color: var(--muted); }
.sec-facts dd { margin: 0; }
.danger-zone h4 { color: color-mix(in srgb, var(--critical) 55%, var(--text)); }
.delete-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.delete-form .acc-field { flex: 1; min-width: 220px; }
.notice {
  margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.notice.good { background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .35); }

/* помощь */
.help-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.help-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.help-tool {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; text-align: left;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); transition: border-color .15s, background .15s;
}
.help-tool:hover { border-color: var(--accent); background: var(--accent-soft); }
.help-tool svg { width: 18px; height: 18px; color: var(--accent); margin-top: 2px; }
.help-tool span { display: flex; flex-direction: column; gap: 2px; }
.help-tool small { color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.faq-list { display: flex; flex-direction: column; gap: 6px; }
.faq { border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.faq summary {
  display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px;
  cursor: pointer; font-weight: 600; font-size: 14px; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 700; transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 14px 12px; color: var(--muted); font-size: 14px; }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; font-size: 14px; align-items: center; }
.keys dt { margin: 0; }
.keys dd { margin: 0; color: var(--muted); }
kbd {
  display: inline-block; padding: 1px 7px; border-radius: 6px; font: 600 12px/1.6 "Google Sans Code", ui-monospace, monospace;
  background: var(--surface-2); border: 1px solid var(--border); border-bottom-width: 2px;
}

/* «Меньше анимации» в настройках: без появлений, переходов и движения */
.calm *, .calm *::before, .calm *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* появление при открытии платформы: новые блоки — вместе с языком и профилем */
.appear .side-links { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 500ms; }
.appear .top-actions { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: 300ms; }

/* свёрнутая панель: только значки; тариф прячется */
@media (min-width: 761px) {
  .side-link span { transition: opacity .2s; white-space: nowrap; }
  .sidebar-closed .side-link span { opacity: 0; pointer-events: none; }
  .sidebar-closed .user-chevron { opacity: 0; }
}

/* телефон: в нижнем меню нет места — настройки и помощь открываются из меню профиля */
@media (max-width: 760px) {
  .side-links, .user-chevron, .user-info { display: none; }  /* в нижнем меню — только аватар */
  .top-actions { top: 12px; right: 12px; gap: 6px; }
  .top-upgrade { height: 34px; padding: 0 14px 0 10px; font-size: 13px; }
  .token-pill { height: 34px; padding: 0 12px 0 10px; gap: 6px; font-size: 13px; }
  .token-pill svg { width: 16px; height: 16px; }
  .view { padding-top: 58px; }
  button.user { width: auto; border-top: 0; }
  .account-menu { left: 8px; right: 8px; bottom: 64px; width: auto; }
  .account-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  /* разделы — боковой панелью слева (как меню приложения): выезжает по ☰ поверх затемнения, сверху — «Аккаунт».
     Закрытая панель невидима и для Tab: visibility меняется после того, как она уехала */
  .acc-layout { position: relative; grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .acc-tabs {
    position: absolute; top: 0; bottom: 0; left: 0; z-index: 5; width: min(290px, 82vw); overflow-y: auto;
    gap: 2px; padding: calc(18px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom));
    border-right: 1px solid var(--border); box-shadow: 0 0 40px rgba(0, 0, 0, .55);
    transform: translateX(-100%); visibility: hidden;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility 0s .26s;
  }
  .acc-layout.nav-open .acc-tabs { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
  .acc-tabs h2 { margin: calc(-8px) 12px 14px 52px; font-size: 20px; line-height: 44px; }  /* в одной строке с ☰ */
  .acc-tabs button { padding: 12px 14px; border-radius: 999px; font-size: 15px; }
  .acc-tabs button svg { width: 19px; height: 19px; }
  .acc-scrim {
    display: block; position: absolute; inset: 0; z-index: 4; background: rgba(4, 2, 12, .6);
    opacity: 0; pointer-events: none; transition: opacity .26s;
  }
  .acc-layout.nav-open .acc-scrim { opacity: 1; pointer-events: auto; }
  /* ☰ — поверх панели: та же кнопка и открывает, и закрывает её */
  .acc-menu { display: grid; position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 8px; z-index: 6; width: 44px; height: 44px; }
  .acc-menu { border-radius: 50%; }
  .acc-menu svg { width: 22px; height: 22px; }
  .acc-close { top: calc(10px + env(safe-area-inset-top)); right: 8px; }
  .acc-panel { padding: 18px 16px 28px; }
  /* название раздела — в одной строке с ☰ и крестиком */
  .acc-head { top: -18px; margin: -18px -16px 12px; padding: calc(20px + env(safe-area-inset-top)) 56px 12px 60px; }
  .acc-grid, .acc-grid.three, .help-tools, .plan-cards { grid-template-columns: 1fr; }
  .plan-request, .plan-sub { flex-direction: column; align-items: flex-start; }
}
/* узкий телефон: «2 140 токенов» вместо «Осталось 2 140 токенов» — вместе с «Сменить тариф» влезает и в 320 px */
@media (max-width: 380px) {
  .token-pill .tp-long { display: none; }
  .token-pill .tp-short { display: inline; }
}

/* ===== админ-панель: тарифы, заявки и обращения ===== */
.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.plan-td { min-width: 210px; }
.plan-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.plan-cell small { font-size: 12px; color: var(--muted); }
.plan-cell .meter { margin-top: 2px; }
.warn-text { color: var(--warning) !important; }
.plan-form { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.plan-form select {
  width: auto; padding: 5px 8px; border-radius: 8px; font-size: 12.5px; resize: none;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
}
.inbox { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.inbox-item { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); display: flex; flex-direction: column; gap: 6px; }
.inbox-item.new { border-color: color-mix(in srgb, var(--series) 55%, var(--border)); }
.inbox-item.done, .inbox-item.rejected { opacity: .62; }
.inbox-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 14px; }
.inbox-top a { color: var(--accent); font-size: 13px; }
.inbox-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--muted); }
.inbox-meta .btn { margin-left: auto; }
.inbox-text { margin: 0; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.inbox-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* заголовок раздела не заходит под «Сменить тариф» справа вверху */
@media (min-width: 761px) and (max-width: 1360px) { .view-head { padding-right: 190px; } }

/* невысокий экран (ноутбук 768 px): боковая панель плотнее, а список чатов не сжимается до нуля —
   иначе «Настройки» наезжают на «Новый чат» */
@media (min-width: 761px) {
  .chat-list { min-height: 46px; }
}
@media (min-width: 761px) and (max-height: 820px) {
  .sidebar { gap: 14px; }
  .nav-item { padding-top: 8px; padding-bottom: 8px; }
  .side-links { margin-top: -6px; }
  .side-link { padding-top: 6px; padding-bottom: 6px; }
  .user { margin-top: -4px; padding-top: 10px; }
}

/* ================= Как в Gemini: размеры в боковой панели, прокрутка чатов, шрифты окна аккаунта ================= */
/* Боковая панель: текст 14 px, значки 18 px, пункты ниже — как в боковой панели Gemini.
   Только на компьютере: на телефоне панель — нижнее меню со своими размерами */
@media (min-width: 761px) {
  .sidebar { font-size: 14px; }
  .logo img { width: 32px; height: 32px; }
  .brand-name { font-size: 17px; font-weight: 500; font-family: var(--font-display); }
  .brand-name b { font-weight: 600; }
  .sidebar-toggle svg { width: 17px; height: 17px; }
  .nav { gap: 2px; }
  .nav-item { gap: 12px; padding: 8px 12px; font-size: 14px; font-weight: 500; }
  .nav-item svg, .side-link svg { width: 18px; height: 18px; }
  .new-chat { gap: 6px; padding: 8px 14px; font-size: 14px; }
  .new-chat svg { width: 16px; height: 16px; }
  .chat-item { padding: 7px 10px; }
  .chat-item-text span { font-size: 13.5px; }
  .chat-item-text small { font-size: 11.5px; }
  .chat-item .icon-btn { width: 26px; height: 26px; }
  .chat-item .icon-btn svg { width: 15px; height: 15px; }
  .chat-list-empty { font-size: 13px; }
  .side-link { gap: 12px; padding: 7px 12px; font-size: 14px; }
  .sidebar .user-avatar { width: 30px; height: 30px; font-size: 13px; }
  .sidebar .user-avatar svg { width: 16px; height: 16px; }
  .user-name { font-size: 13.5px; font-weight: 500; }
  .user-email { font-size: 11.5px; }
  .user-chevron { width: 15px; height: 15px; }
  .pro-tag { font-size: 9.5px; }
}

/* список чатов и меню «таблеток»: прозрачная тонкая полоса прокрутки — проявляется, только когда курсор над списком */
.chat-items, .pick-menu { scrollbar-width: thin; scrollbar-color: transparent transparent; transition: scrollbar-color .2s; }
.chat-items:hover, .pick-menu:hover { scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.chat-items::-webkit-scrollbar, .pick-menu::-webkit-scrollbar { width: 6px; }
.chat-items::-webkit-scrollbar-track, .pick-menu::-webkit-scrollbar-track { background: transparent; }
.chat-items::-webkit-scrollbar-thumb, .pick-menu::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
.chat-items:hover::-webkit-scrollbar-thumb, .pick-menu:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .2); }
/* открытый список <select> (класс, язык, количество) — курсор и так над ним, полоса та же */
@supports (appearance: base-select) {
  :is(.pill-field, .acc-field) select::picker(select) { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
}

/* кнопки — как в Gemini: Google Sans, средняя жирность (у Google Sans Text нет полужирного 600 — выходил жирный 700) */
.btn { font-family: var(--font-display); font-weight: 500; }

/* окно аккаунта (тарифы, профиль, настройки…) и меню аккаунта: шрифты Gemini — заголовки, цены и кнопки Google Sans
   средней жирности, остальной текст Google Sans Text обычной; без жирного 600/700 и без разрядки */
.account-dialog, .account-menu { font-family: var(--font-text); font-size: 14px; }
.account-dialog :is(h2, h3, h4, button, .btn, .plan-badge, .plan-popular, .save-tag, .acc-field > span,
  .faq summary, .help-tool b, .profile-who b, .sec-who b, .switch-row b, .plan-price b, .pc-status),
.account-menu :is(button, a, b, .plan-badge) {
  font-family: var(--font-display); font-weight: 500; letter-spacing: normal;
}
.account-dialog :is(p, li, small, dd, .plan-list, .pc-meter-text, .help-steps),
.account-menu small { font-family: var(--font-text); font-weight: 400; }
.account-dialog .acc-head h3 { font-size: 22px; font-weight: 400; }
.account-dialog .acc-tabs h2 { font-size: 18px; font-weight: 400; }
.account-dialog .plan-price b { font-size: 26px; font-weight: 400; letter-spacing: -.01em; }
.account-dialog .plan-list { font-size: 13.5px; }
.account-dialog .help-steps b { font-weight: 500; }

/* ================= Формы разделов — как в Gemini ================= */
/* Документы, презентации, игры, лаборатория, таблицы: одно большое скруглённое поле (как поле запроса в чате) —
   сверху тема и пожелания, снизу «таблетки» с предметом, классом, языком, количеством и кнопка создания. */
.tool-box {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 12px 12px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 30px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .32); transition: border-color .2s, box-shadow .2s;
}
.tool-box:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 10px 34px rgba(0, 0, 0, .32), 0 0 0 4px rgba(34, 197, 94, .12);
}
.box-label { display: block; font: 500 12.5px/1.3 var(--font-display); color: var(--muted); padding-top: 2px; }
.box-label em { font-style: normal; font-weight: 400; opacity: .85; }
.box-label.box-divided { margin: 8px 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
.tool-box textarea {
  width: 100%; padding: 4px 10px 6px 0; border: 0; border-radius: 0; background: transparent; resize: none;
  color: var(--text); box-shadow: none; outline: none;
}
.tool-box textarea:focus { border: 0; box-shadow: none; }
.tool-box textarea::placeholder { color: var(--muted); opacity: .85; }
.box-main { font-size: 16px; line-height: 1.55; min-height: 54px; }
.box-extra { font-size: 14.5px; line-height: 1.5; min-height: 28px; }
.tool-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 8px 0 0 -8px; }
.pills { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* «таблетка»: подпись и значение в одной капсуле, как выбор модели в поле Gemini */
.pill-field {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 14px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid transparent; cursor: pointer; transition: border-color .15s, background .15s;
}
.pill-field:hover { border-color: var(--border); }
.pill-field:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.pill-field > span { font: 500 13px/1 var(--font-display); color: var(--muted); white-space: nowrap; }
.pill-field select, .pill-field input {
  width: auto; padding: 7px 10px; border: 0; border-radius: 999px; background-color: transparent; color: var(--text);
  font: 500 14px/1.2 var(--font-display); outline: none; box-shadow: none;
}
.pill-field select {
  padding-right: 28px; -webkit-appearance: none; appearance: none; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D94BA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
}
.pill-field select:focus, .pill-field input:focus { border: 0; box-shadow: none; }
.pill-field select option { background: var(--surface); color: var(--text); }
.pill-field input { width: 170px; }
.pill-field input::placeholder { color: var(--muted); opacity: .8; font-weight: 400; }
.pill-field input.short { width: 76px; }
.pill-field input[type="date"] { width: auto; color-scheme: dark; }
/* ҚМЖ: данные шапки — над нижней полосой формы, отделены линией, как «Пожелания» */
.doc-meta { margin: 8px 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border); }
.doc-meta[hidden] { display: none; }
.doc-meta-hint { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.doc-meta .pills { margin-left: -8px; }
/* колледж: специальность с кодом длиннее школьного предмета — поле шире (на телефоне оно и так во всю ширину) */
@media (min-width: 761px) { html[data-edu="college"] .pill-field.grow input[data-lesson="subject"] { width: 300px; } }
#set-default_profession { width: min(260px, 50vw); }
/* выпадающие списки «таблеток» и окна аккаунта — как меню Gemini: тёмная скруглённая панель с тенью, пункт под мышью
   подсвечен, у выбранного справа галочка. Класс, язык и количество — настраиваемый <select> (appearance: base-select,
   Chrome и Edge 135+; в других браузерах — обычный список); подсказки предмета — своё меню .pick-menu (app.js) */
@supports (appearance: base-select) {
  :is(.pill-field, .acc-field) select, :is(.pill-field, .acc-field) select::picker(select) { appearance: base-select; }
  :is(.pill-field, .acc-field) select { padding-right: 8px; background-image: none; }
  :is(.pill-field, .acc-field) select::picker-icon {  /* стрелка поворачивается, пока список открыт */
    content: ""; width: 14px; height: 14px; margin-left: 6px; transition: rotate .2s;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239D94BA' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 14px;
  }
  :is(.pill-field, .acc-field) select:open::picker-icon { rotate: 180deg; }
  :is(.pill-field, .acc-field) select::picker(select) {
    margin-block: 6px; padding: 6px; min-width: 132px; max-height: min(320px, 50vh); overflow-y: auto;
    border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2); color: var(--text);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
    transition: opacity .15s, translate .15s, display .15s allow-discrete, overlay .15s allow-discrete;
  }
  :is(.pill-field, .acc-field) select:not(:open)::picker(select) { opacity: 0; translate: 0 -4px; }
  @starting-style { :is(.pill-field, .acc-field) select:open::picker(select) { opacity: 0; translate: 0 -4px; } }
  :is(.pill-field, .acc-field) select option {
    display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px;
    background: transparent; color: var(--text); font: 400 14px/1.2 var(--font-text); cursor: pointer;
  }
  :is(.pill-field, .acc-field) select option:hover, :is(.pill-field, .acc-field) select option:focus-visible { background: rgba(255, 255, 255, .07); outline: none; }
  :is(.pill-field, .acc-field) select option:checked { font-weight: 500; }
  :is(.pill-field, .acc-field) select option::checkmark { order: 1; margin-left: auto; content: "✓"; color: var(--accent); }
  :is(.pill-field, .acc-field) select option:disabled { color: var(--muted); opacity: .45; cursor: default; }
  .calm :is(.pill-field, .acc-field) select::picker(select) { transition: none; }
  /* окно аккаунта: меню открывается вниз, если под списком хватает места (по умолчанию Chrome выбирает сторону,
     где места больше), а у «таблеток» «Настроек», стоящих справа, — по их правому краю, не вылезая за окно */
  :is(.set-pill, .acc-field) select::picker(select) { position-try-order: normal; }
  .set-pill select::picker(select) { position-area: block-end span-inline-start; }
}
/* подсказки предмета: у <datalist> список не оформить — своё меню той же формы, под «таблеткой» */
.pills { position: relative; }
.pick-menu {
  position: absolute; z-index: 30; padding: 6px; min-width: 200px; max-width: min(340px, 100%);
  max-height: min(320px, 50vh); overflow-y: auto;
  border: 1px solid var(--border); border-radius: 16px; background: var(--surface-2);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35); animation: pick-in .15s ease-out;
}
.pick-item {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-radius: 10px;
  color: var(--text); font: 400 14px/1.2 var(--font-text); cursor: pointer;
}
.pick-item:hover, .pick-item.active { background: rgba(255, 255, 255, .07); }
.pick-item[aria-selected="true"] { font-weight: 500; }
.pick-item[aria-selected="true"]::after { content: "✓"; margin-left: auto; color: var(--accent); }
@keyframes pick-in { from { opacity: 0; translate: 0 -4px; } }
.calm .pick-menu { animation: none; }
/* «Создать…»: капсула со стрелкой, как кнопка отправки в Gemini */
.go-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px 0 22px;
  border: 0; border-radius: 999px; background: var(--primary); color: var(--on-accent); white-space: nowrap;
  font: 500 15px/1 var(--font-display); box-shadow: 0 8px 22px rgba(22, 163, 74, .35);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.go-btn::after {
  content: ""; width: 18px; height: 18px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5 12 5l6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5 12 5l6.5 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.go-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(22, 163, 74, .45); }
.go-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.go-btn:disabled { opacity: .55; cursor: progress; }

/* переключатели видов (КСП / СОР / СОЧ…, игры, «По описанию / Из файлов») — «таблетками» */
.mode-tabs { gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; }
.mode-tab {
  padding: 8px 16px 8px 13px; border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--muted); font: 500 14px/1.2 var(--font-display);
}
.mode-tab:hover { background: var(--hover-glass); color: var(--text); }
.mode-tab.active {
  background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--text); font-weight: 500; box-shadow: none;
}

/* примеры (лаборатория, таблицы) — подсказками-«таблетками» под полем, как в чате */
.chips { gap: 10px; margin-top: 14px; }
.tool-box .chips, .tool-stack > .chips { margin-top: 0; }
.chip {
  padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--text); font: 500 14px/1.2 var(--font-display); transition: background .15s, border-color .15s;
}
.chip:hover { background: var(--hover-glass); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
#sheetsForm[hidden] + .chips { display: none; }  /* примеры описания — только в режиме «По описанию» */

/* шаблоны презентации — под полем */
.tool-section { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.template-card { border-radius: 16px; font-family: var(--font-display); font-weight: 500; }
/* образцы «Тема урока» / «Предмет · класс» в галерее — шрифтами Gemini (просьба пользователя); цвета и украшения —
   шаблона. !important — потому что шрифты шаблона приходят в атрибуте style карточки */
.template-card .template-preview {
  --s-font: "Google Sans", "Google Sans Text", sans-serif !important;
  --s-body: "Google Sans Text", "Google Sans", sans-serif !important;
}

/* перенос из Word / Excel: два шага карточками рядом, ниже — поле запроса */
.tool-stack { display: flex; flex-direction: column; gap: 14px; }
.import-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.step-label { font: 500 14px/1.3 var(--font-display); }
.dropzone { border-radius: 24px; }

/* пока ИИ создаёт материал — как в Gemini и в чате: кольцо вокруг значка и переливающиеся полосы */
.ai-working { display: flex; gap: 14px; align-items: flex-start; padding: 6px 2px; }
.ai-working .avatar {
  position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft);
  display: grid; place-items: center; flex-shrink: 0;
}
.ai-working .avatar img { position: relative; width: 22px; height: 22px; display: block; animation: ai-pulse 1.6s ease-in-out infinite; }
.ai-working .avatar-ring { opacity: 1; animation: ring-spin 1.1s linear infinite; }
.ai-working-body { flex: 1; min-width: 0; }
.ai-working-body p { margin: 5px 0 14px; color: var(--muted); font-size: 14.5px; }
.ai-working .ai-loader { display: flex; }

@media (max-width: 760px) {
  .tool-box { padding: 14px 10px 10px 18px; border-radius: 26px; }
  .box-extra { min-height: 48px; }  /* подсказка в «Пожеланиях» на телефоне — в две строки */
  .tool-bar { flex-direction: column; align-items: stretch; }
  .go-btn { width: 100%; }
  .pill-field.grow { flex: 1 1 100%; }
  .pill-field.grow input { width: 100%; }
  .import-steps { grid-template-columns: 1fr; }
}

/* ================= Примеры «Как это работает» в разделах ================= */
/* Слева — мини-поле: печатается запрос, нажимается кнопка; справа по шагам собирается результат.
   Шаги переключает app.js (класс .on у элементов с data-at). После создания пример прячется — на его месте результат. */
.tool-demo { margin: 30px auto 0; }  /* по центру колонки, как форма */
.view:has(.result:not([hidden])) .tool-demo { display: none; }
.tool-demo figcaption { display: flex; flex-direction: column; gap: 3px; margin-bottom: 14px; }
.tool-demo figcaption b { font: 500 15px/1.3 var(--font-display); }
.tool-demo figcaption span { color: var(--muted); font-size: 14px; }
.demo-stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 250px) 36px minmax(0, 1fr); align-items: center; gap: 14px;
  min-height: 290px; padding: 26px 28px; border-radius: 26px; overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(70% 90% at 85% 15%, rgba(34, 197, 94, .16), transparent 70%), var(--surface);
}
.demo-stage .pop { opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.demo-stage .pop.on { opacity: 1; transform: none; }

/* мини-поле запроса */
.demo-input {
  display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; border-radius: 20px;
  background: var(--bg); border: 1px solid var(--border);
}
.demo-type {
  align-self: flex-start; max-width: 0; overflow: hidden; white-space: nowrap; min-height: 22px;
  font-size: 15px; line-height: 22px; border-right: 2px solid transparent; transition: max-width 1.1s steps(26, end);
}
.demo-type.on { max-width: 100%; border-right-color: var(--accent); animation: demo-caret 1s step-end infinite; }
@keyframes demo-caret { 50% { border-right-color: transparent; } }
.demo-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.demo-pill { padding: 5px 11px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font: 500 12px/1.2 var(--font-display); }
.demo-swatches { display: inline-flex; gap: 4px; align-items: center; }
.demo-swatches i { width: 10px; height: 10px; border-radius: 50%; background: #2E7D32; }
.demo-swatches i:nth-child(2) { background: #F9A825; }
.demo-swatches i:nth-child(3) { background: #16A34A; }
.demo-go {
  align-self: flex-end; padding: 8px 14px; border-radius: 999px; background: var(--primary); color: var(--on-accent);
  font: 500 12.5px/1 var(--font-display); white-space: nowrap; transition: box-shadow .3s;
}
.demo-go.on { animation: demo-press .55s ease; box-shadow: 0 0 0 6px rgba(34, 197, 94, .22); }
@keyframes demo-press { 40% { transform: scale(.9); } }
.demo-arrow { width: 32px; height: 32px; color: var(--accent); opacity: .2; transform: translateX(-6px); transition: opacity .4s, transform .4s; }
.demo-arrow.on { opacity: 1; transform: none; }
.demo-result { position: relative; min-width: 0; padding-bottom: 34px; }
.demo-done {
  position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
  border-radius: 999px; background: rgba(22, 163, 74, .16); border: 1px solid rgba(74, 222, 128, .4);
  color: #BBF7D0; font: 500 13px/1 var(--font-display);
}
.demo-done i {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #16A34A; color: #FFFFFF; font-style: normal; font-size: 12px;
}

/* ================= 5E-урок ================= */
/* цвет этапа: --fe — фон значка, --fe-on — цифра на нём, --fe-ink — текст этапа на тёмном фоне */
.fe-engage { --fe: #F59E0B; --fe-on: #2B1700; --fe-ink: #FBBF24; }
.fe-explore { --fe: #0284C7; --fe-on: #FFFFFF; --fe-ink: #38BDF8; }
.fe-explain { --fe: #16A34A; --fe-on: #FFFFFF; --fe-ink: #4ADE80; }
.fe-elaborate { --fe: #059669; --fe-on: #FFFFFF; --fe-ink: #34D399; }
.fe-evaluate { --fe: #E11D48; --fe-on: #FFFFFF; --fe-ink: #FB7185; }

.fe-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.fe-step {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 12px; text-align: left; color: var(--text);
  border: 1px solid var(--border); border-top: 3px solid var(--fe); border-radius: 12px; background: var(--surface);
}
.fe-step:hover { border-color: var(--fe); }
.fe-step b, .fe-num {
  flex-shrink: 0; display: grid; place-items: center; background: var(--fe); color: var(--fe-on); font-family: var(--font-display);
}
.fe-step b { width: 28px; height: 28px; border-radius: 8px; font-size: 14px; }
.fe-step span { display: flex; flex-direction: column; min-width: 0; font: 600 14px/1.25 var(--font-display); }
.fe-step small { color: var(--muted); font: 400 12px/1.3 var(--font-text); }

.fe-intro, .fe-phase, .fe-stem, .fe-ai, .fe-make { padding: 20px 22px; margin-bottom: 14px; }
.fe-big { margin: 0 0 16px; font: 600 19px/1.35 var(--font-display); }
.fe-big span { display: block; margin-bottom: 4px; color: var(--muted); font: 500 12px var(--font-display); letter-spacing: .06em; text-transform: uppercase; }
.fe-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.fe-cols h4, .fe-box h5 { margin: 0 0 4px; color: var(--muted); font: 600 13px var(--font-display); }
.fe-cols p, .fe-cols ul, .fe-cols ol { margin: 0 0 12px; }
.fe-intro ul, .fe-box ul, .fe-box ol { padding-left: 20px; }

.fe-phase { border-left: 4px solid var(--fe); scroll-margin-top: 16px; }
.fe-phase-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.fe-num { width: 38px; height: 38px; border-radius: 10px; font-size: 18px; font-weight: 700; }
.fe-phase-head div { flex: 1; min-width: 0; }
.fe-phase-head h3 { margin: 0; color: var(--fe-ink); font: 600 18px/1.3 var(--font-display); }
.fe-phase-head h3 span { color: var(--text); font-weight: 500; }
.fe-phase-head p { margin: 3px 0 0; color: var(--muted); }
.fe-min {
  flex-shrink: 0; padding: 4px 10px; border-radius: 999px; color: var(--fe-ink); font: 600 13px var(--font-display);
  background: color-mix(in srgb, var(--fe) 18%, transparent);
}
.fe-meta { margin: 6px 0 0; color: var(--muted); }
.fe-meta b { color: var(--text); font-weight: 600; }
.fe-box {
  margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--fe) 28%, var(--border)); background: color-mix(in srgb, var(--fe) 6%, var(--surface));
}
.fe-box h4 { margin: 0 0 10px; color: var(--fe-ink); font: 600 15px var(--font-display); }
.fe-box p { margin: 0 0 8px; }
.fe-sci { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.fe-sci > div, .fe-data, .fe-note { padding: 10px 12px; border-radius: 10px; background: var(--surface); }
.fe-sci b, .fe-data b { display: block; margin-bottom: 3px; color: var(--fe-ink); font: 600 12.5px var(--font-display); }
.fe-sci p, .fe-data p { margin: 0; font-size: 14px; }
.fe-data { margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.fe-note { margin: 8px 0 0; font-size: 14px; }
.fe-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; }
.fe-terms dt { font-weight: 600; }
.fe-terms dd { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.fe-answer { margin-top: 6px; }
.fe-answer summary { cursor: pointer; color: var(--fe-ink); font: 500 13.5px var(--font-display); }
.fe-answer p { margin: 6px 0 0; color: var(--muted); }
.fe-table-wrap { overflow-x: auto; }
.fe-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fe-table th, .fe-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.fe-table th { color: var(--muted); font: 600 12.5px var(--font-display); }
.fe-quiz { display: flex; flex-direction: column; gap: 12px; margin: 0; padding-left: 22px; }
.fe-quiz p { margin: 0 0 4px; }
.fe-quiz ol { margin: 0; padding-left: 22px; color: var(--muted); }

.fe-stem h3, .fe-ai h3, .fe-make h3 { margin: 0 0 12px; font: 600 17px var(--font-display); }
.fe-stem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fe-stem-grid > div, .fe-ai-list li { padding: 14px; border-radius: 12px; border: 1px solid var(--border); }
.fe-stem-grid b {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 8px; border-radius: 9px;
  background: var(--accent-soft); color: var(--accent); font: 700 17px var(--font-display);
}
.fe-stem-grid h4, .fe-ai-list h4 { margin: 0 0 4px; font: 600 14px var(--font-display); }
.fe-stem-grid p, .fe-ai-list p { margin: 0; color: var(--muted); font-size: 14px; }
.fe-ai-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: fe; }
.fe-ai-list li { counter-increment: fe; }
.fe-ai-list li::before { content: "0" counter(fe); display: block; margin-bottom: 6px; color: var(--accent); font: 700 13px var(--font-display); }
.fe-make .muted { margin: -6px 0 12px; }
.fe-make-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.fe-make-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 12px; text-align: left;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font: 500 14px/1.3 var(--font-display);
}
.fe-make-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.fe-make-btn svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* пример 5E в «Как это работает»: пять этапов появляются по очереди */
.demo-5e { display: flex; flex-direction: column; gap: 7px; }
.demo-e { display: grid; grid-template-columns: 20px 62px 1fr; align-items: center; gap: 8px; color: #1F2937; font: 600 10.5px var(--font-display); }
.demo-e b { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--fe); color: var(--fe-on); }
.demo-e i { display: block; height: 6px; border-radius: 3px; background: #CBD5E1; }

@media (max-width: 960px) {
  .fe-steps { grid-template-columns: repeat(5, minmax(178px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .fe-sci, .fe-stem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-ai-list { grid-template-columns: 1fr; }
  .fe-make-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .fe-cols, .fe-terms, .fe-sci, .fe-stem-grid { grid-template-columns: 1fr; }
  .fe-make-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fe-intro, .fe-phase, .fe-stem, .fe-ai, .fe-make { padding: 16px; }
  .fe-phase-head { flex-wrap: wrap; }
}

/* документы: лист Word с таблицей КСП */
.demo-paper { padding: 14px 14px 16px; border-radius: 10px; background: #FFFFFF; color: #1F2937; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
.paper-title { display: block; margin-bottom: 10px; text-align: center; font: 600 12.5px/1.3 var(--font-display); color: #14532D; }
.demo-table { border: 1px solid #334155; border-bottom: 0; }
.demo-row { display: grid; grid-template-columns: .8fr 1.25fr 1.25fr .9fr; border-bottom: 1px solid #334155; }
.demo-row > span { min-height: 26px; padding: 5px 6px; border-right: 1px solid #334155; font-size: 10.5px; line-height: 1.3; }
.demo-row > span:last-child { border-right: 0; }
.demo-row.head > span { background: #F1F5F9; font-weight: 600; text-align: center; }
.demo-row i { display: block; height: 6px; margin: 3px 0; border-radius: 3px; background: #CBD5E1; }
.demo-row i.short { width: 60%; }

/* презентации: три слайда, на шаге 6 меняется шаблон */
.demo-deck {
  --d-bg: #FBFDF7; --d-text: #1B2E1A; --d-accent: #2E7D32; --d-soft: #E8F5E9;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.demo-deck.on { --d-bg: #1E1B4B; --d-text: #EEF2FF; --d-accent: #4ADE80; --d-soft: rgba(74, 222, 128, .22); }
.demo-slide {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; padding: 9% 10%;
  display: flex; flex-direction: column; justify-content: center; gap: 6%;
  background: var(--d-bg); color: var(--d-text); box-shadow: 0 12px 26px rgba(0, 0, 0, .35);
  transition: background-color .7s, color .7s, opacity .45s ease, transform .5s cubic-bezier(.2, .8, .2, 1);
}
.demo-slide b { position: relative; font: 700 clamp(9px, 1.25vw, 15px)/1.1 var(--font-display); }
.demo-slide > i { position: relative; width: 22%; height: 3px; border-radius: 2px; background: var(--d-accent); transition: background-color .7s; }
.demo-slide small { position: relative; font-size: clamp(6px, .75vw, 9px); opacity: .7; }
.demo-slide .leaf { position: absolute; border-radius: 50%; transition: background-color .7s; }
.demo-slide .leaf.one { width: 42%; height: 18%; right: -4%; top: 14%; background: var(--d-accent); transform: rotate(22deg); }
.demo-slide .leaf.two { width: 30%; height: 13%; right: 8%; top: 4%; background: #F9A825; transform: rotate(-50deg); }
.demo-slide .s-head { width: 55%; height: 8%; border-radius: 3px; background: var(--d-accent); opacity: .85; transition: background-color .7s; }
.s-cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; gap: 8% 6%; align-content: center; }
.s-cards .s-head { grid-column: 1 / -1; }
.s-cards .c { height: 100%; min-height: 28px; border-radius: 4px; background: var(--d-soft); border-top: 3px solid var(--d-accent); transition: background-color .7s, border-color .7s; }
.s-steps { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 18% 6%; justify-items: center; }
.s-steps .s-head { grid-column: 1 / -1; justify-self: start; }
.s-steps .dot { width: 26%; aspect-ratio: 1; border-radius: 50%; background: var(--d-accent); transition: background-color .7s; }

/* игры: вопрос викторины, правильный ответ загорается зелёным */
.demo-quiz { padding: 16px; border-radius: 18px; background: rgba(18, 14, 46, .85); border: 1px solid var(--border); }
.q-label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }
.q-text { display: block; margin-bottom: 12px; font: 500 15px/1.3 var(--font-display); }
.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.q-options > span {
  position: relative; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.25;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); transition: background-color .35s, border-color .35s;
}
.q-options b { font-weight: 400; }
.q-win.on { background: rgba(34, 197, 94, .28); border-color: rgba(74, 222, 128, .8); }
.q-win.on b::after { content: " ✓"; }
.q-tap {
  position: absolute; right: 10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  background: rgba(255, 255, 255, .85); opacity: 0;
}
.q-win.on .q-tap { animation: demo-tap .7s ease-out; }
@keyframes demo-tap { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }

/* лаборатория: маятник качается, ползунок меняет длину нити, рисуется график */
.demo-sim {
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 14px; align-items: center; padding: 14px 16px;
  border-radius: 18px; background: #0B1022; border: 1px solid var(--border);
}
.sim-pend { position: relative; height: 150px; }
.sim-ceiling { position: absolute; top: 0; left: 15%; right: 15%; height: 5px; border-radius: 3px; background: #475569; }
.sim-arm {
  position: absolute; top: 4px; left: 50%; width: 2px; height: 96px; margin-left: -1px; background: #CBD5E1;
  transform-origin: top center; animation: demo-swing 1.5s ease-in-out infinite alternate, demo-arm 6s ease-in-out infinite;
}
.sim-bob {
  position: absolute; bottom: -12px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #FDE68A, #F59E0B 60%, #B45309);
}
@keyframes demo-swing { from { transform: rotate(26deg); } to { transform: rotate(-26deg); } }
@keyframes demo-arm { 0%, 100% { height: 76px; } 50% { height: 118px; } }
.sim-side { display: flex; flex-direction: column; gap: 14px; }
.sim-ctrl { display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--muted); }
.sim-track { position: relative; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .16); }
.sim-track i {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #4ADE80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .25); animation: demo-thumb 6s ease-in-out infinite;
}
@keyframes demo-thumb { 0%, 100% { left: 18%; } 50% { left: 82%; } }
.sim-graph { width: 100%; height: 56px; overflow: visible; }
.sim-graph path {
  fill: none; stroke: #4ADE80; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 260; stroke-dashoffset: 260;
}
.sim-graph.on path { animation: demo-draw 2.4s ease-out forwards; }
@keyframes demo-draw { to { stroke-dashoffset: 0; } }

/* таблицы: лист Excel — строки заполняются, в строке формул — формула, затем средние */
.demo-sheet { overflow: hidden; border-radius: 10px; background: #FFFFFF; color: #111827; font-size: 11.5px; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
.sheet-fx { display: flex; gap: 10px; align-items: center; min-height: 30px; padding: 6px 10px; border-bottom: 1px solid #D1D5DB; background: #F9FAFB; }
.sheet-fx b { font: italic 500 12px/1 var(--font-display); color: #6B7280; }
.sheet-fx span { font-family: "Google Sans Code", ui-monospace, monospace; color: #15803D; }
.sheet-row { display: grid; grid-template-columns: 26px 1.6fr repeat(3, .6fr) .9fr; border-bottom: 1px solid #E5E7EB; }
.sheet-row > span { padding: 7px 8px; border-right: 1px solid #E5E7EB; white-space: nowrap; overflow: hidden; }
.sheet-row > span:first-child { background: #F3F4F6; color: #6B7280; text-align: center; }
.sheet-row.head > span { background: #E7F5EC; font-weight: 600; color: #14532D; }
.sheet-row .avg { font-weight: 600; color: #15803D; background: #F0FDF4; }

@media (prefers-reduced-motion: reduce) {
  .sim-arm, .sim-track i, .sim-graph.on path, .demo-type.on { animation: none; }
  .sim-graph path { stroke-dashoffset: 0; }
}
@media (max-width: 760px) {
  .demo-stage { grid-template-columns: 1fr; padding: 18px; gap: 12px; }
  .demo-arrow { justify-self: center; transform: rotate(90deg); }
  .demo-arrow.on { transform: rotate(90deg); }
  .demo-sim { grid-template-columns: 1fr; }
}

/* группы шаблонов по предметам — «таблетками», как переключатели видов; листаются вбок на узком экране */
.tpl-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.tpl-group {
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: transparent; white-space: nowrap;
  color: var(--muted); font: 500 13.5px/1.2 var(--font-display); cursor: pointer; transition: color .15s, background .15s;
}
.tpl-group:hover { background: var(--hover-glass); color: var(--text); }
.tpl-group:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tpl-group.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--text); }
.tpl-mark { color: var(--accent); }  /* группа предмета из формы */
@media (max-width: 760px) {
  .tpl-groups { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tpl-groups::-webkit-scrollbar { display: none; }
}

/* предметные шаблоны: узор приходит с сервера картинкой (slides.py, ART) — по тем же фигурам, что и в файле */
[data-art] .mini.title::before { content: ""; inset: 0; background: var(--art-title) 0 0 / 100% 100% no-repeat; }
[data-art] .mini.section::before { content: ""; inset: 0; background: var(--art-section) 0 0 / 100% 100% no-repeat; }
[data-art] .mini.content::before { content: ""; inset: 0; background: var(--art-content) 0 0 / 100% 100% no-repeat; }
[data-art] .mini.title:not(.has-photo) { padding-right: 19.75%; }  /* название в файле — до 10.7″, правее узор */
[data-art] .mini.section:not(.has-photo) { padding-right: 21%; }

/* «Викторина!» — главная игра: вокруг кнопки бежит радужная рамка цветами сайта и плашек викторины, под ней свечение */
@property --rainbow-turn { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.mode-tabs:has(.rainbow) {  /* место под свечение: иначе прокручиваемый ряд обрезал бы его сверху и снизу */
  padding: 8px; margin: -8px 0 10px calc(max(0px, calc((100% - 920px) / 2)) - 8px); isolation: isolate;
}
.mode-tab.rainbow { position: relative; border-color: transparent; }
.mode-tab.rainbow::before, .mode-tab.rainbow::after {
  content: ""; position: absolute; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--rainbow-turn), #22C55E, #15803D, #14A874, #FCC63A, #4ADE80, #22C55E);
  animation: rainbow-turn 3.5s linear infinite;
}
.mode-tab.rainbow::before {  /* рамка: градиент виден только в кольце толщиной 1.5px */
  inset: -1px; padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.mode-tab.rainbow::after { inset: 0; z-index: -1; filter: blur(9px); opacity: .45; }
.mode-tab.rainbow:hover::after, .mode-tab.rainbow.active::after { opacity: .65; }
@keyframes rainbow-turn { to { --rainbow-turn: 360deg; } }
@media (prefers-reduced-motion: reduce) { .mode-tab.rainbow::before, .mode-tab.rainbow::after { animation: none; } }

/* «Пригласить коллег»: ссылка с кнопкой копирования, код, счётчики и шаги */
.ref-link { display: flex; gap: 8px; }
.ref-link input {
  flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text); font: inherit;
}
.ref-code { font: 600 15px/1 var(--font-display); letter-spacing: .12em; color: var(--text); }
.ref-share { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-section > p.ref-codeline { margin: 14px 0 12px; }  /* «Ваш код» — чуть ниже ссылки */
.ref-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ref-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; }
.ref-stat b { font: 600 22px/1.1 var(--font-display); }
.ref-stat span { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
.ref-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.45; }
@media (max-width: 760px) { .ref-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* «Пригласить коллег» слева и в меню аккаунта: подарок и бонус золотым — заметно, но в стиле панели */
.side-invite svg, #amInvite svg { color: var(--gold); }
.invite-bonus {
  margin-left: auto; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold);
  font: 500 11.5px/1.4 var(--font-display);
}
.invite-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.invite-text small { color: var(--gold); font: 500 11.5px/1.3 var(--font-display); }

/* ================= Телефон как в Gemini: верхняя панель и выезжающее меню ================= */
/* Вместо нижнего меню (правила выше) — тонкая панель сверху: ☰ и название раздела, справа токены и тариф.
   Боковая панель — та же, что на компьютере, — выезжает слева поверх затемнения (app.js, setDrawer) */
.m-bar, .m-scrim { display: none; }
@media (max-width: 760px) {
  .app { flex-direction: row; }
  .m-bar {
    display: flex; align-items: center; gap: 4px; position: fixed; z-index: 30; top: 0; left: 0; right: 0;
    height: 56px; padding: 0 8px; padding-top: env(safe-area-inset-top);
    background: transparent;  /* без плашки, как в Gemini: прокручиваемый текст плавно гаснет у края (ниже) */
  }
  .m-menu {
    width: 44px; height: 44px; display: grid; place-items: center; flex-shrink: 0;
    border: 0; border-radius: 50%; background: transparent; color: var(--text);
  }
  .m-menu:hover, .m-menu:active { background: var(--hover-glass); }
  .m-menu svg { width: 22px; height: 22px; }
  .m-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 18px/1 var(--font-display); }
  /* fixed, как и верхняя панель: на телефоне прокручивается вся страница, а кнопки остаются на месте */
  .top-actions { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 31; }
  .view { padding-top: calc(68px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  /* текст, уходящий вверх при прокрутке, плавно исчезает под ☰ и названием — вместо тёмной плашки */
  .view, .chat-scroll {
    -webkit-mask-image: linear-gradient(transparent calc(48px + env(safe-area-inset-top)), #000 calc(68px + env(safe-area-inset-top)));
    mask-image: linear-gradient(transparent calc(48px + env(safe-area-inset-top)), #000 calc(68px + env(safe-area-inset-top)));
  }
  .view-chat .chat-scroll { -webkit-mask-image: linear-gradient(transparent, #000 18px); mask-image: linear-gradient(transparent, #000 18px); }
  .view-chat { -webkit-mask-image: none; mask-image: none; }

  .m-scrim {
    display: block; position: fixed; inset: 0; z-index: 35; background: rgba(0, 0, 0, .55);
    opacity: 0; pointer-events: none; transition: opacity .25s;
  }
  body.drawer-open .m-scrim { opacity: 1; pointer-events: auto; }

  /* меню слева — те же блоки и размеры, что на компьютере (как боковая панель Gemini) */
  .sidebar {
    position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(304px, 86vw);
    flex-direction: column; gap: 18px; padding: calc(16px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
    border-top: 0; border-right: 1px solid var(--border); border-radius: 0 20px 20px 0;
    background: var(--surface); font-size: 14px; overflow-y: auto;
    transform: translateX(-102%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); visibility: hidden;
  }
  body.drawer-open .sidebar { transform: none; visibility: visible; }
  .brand { display: flex; }
  .nav { flex: none; flex-direction: column; gap: 2px; overflow: visible; }
  .nav-item { flex: none; flex-direction: row; gap: 12px; min-width: 0; padding: 10px 12px; font-size: 14px; align-items: center; }
  .nav-item svg { width: 18px; height: 18px; }
  .chat-list { display: flex; position: static; inset: auto; z-index: auto; padding: 0; background: none; flex: 1 0 auto; min-height: 240px; }
  /* название раздела — в верхней панели; под ней остаётся описание, у ассистента — только приветствие */
  .view-head h1 { display: none; }
  .view-chat .view-head { display: none; }
  #newChat { padding: 10px 14px; }
  #newChat span { display: inline; }
  .chats-toggle { display: none; }  /* чаты — в меню слева */
  .side-links { display: flex; margin-top: 0; }
  .side-link { padding: 9px 12px; }
  button.user { width: 100%; margin: 0; padding: 12px 4px 0 8px; gap: 10px; border-top: 1px solid var(--border); }
  .user-info { display: flex; }
  .user-chevron { display: block; }
  .user-avatar { width: 34px; height: 34px; font-size: 15px; }
  .account-menu, .sidebar-closed .account-menu { z-index: 50; left: 8px; right: auto; bottom: calc(76px + env(safe-area-inset-bottom)); width: min(296px, calc(100vw - 16px)); }
  .toast { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .sidebar, .m-scrim { transition: none; } }
@media (max-width: 760px) {
  /* справа в верхней панели — компактно: тариф круглой кнопкой с логотипом, токены короткой надписью */
  .top-actions { gap: 6px; }
  .top-upgrade { width: 36px; height: 36px; padding: 0; justify-content: center; border-radius: 50%; }
  .top-upgrade span { display: none; }
  .token-pill { height: 36px; }
  .token-pill .tp-long { display: none; }
  .token-pill .tp-short { display: inline; }
  .m-bar { padding-right: 150px; }  /* название не заходит под кнопки справа */
}

/* вход из встроенного браузера приложения: Google его не пускает — подсказка открыть сайт в Safari или Chrome */
.in-app {
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 14px; text-align: left;
  background: rgba(242, 183, 5, .12); border: 1px solid rgba(242, 183, 5, .35); color: #FDE68A; font-size: 13.5px; line-height: 1.45;
}
.in-app p { margin: 0; }
.in-app-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.in-app-btn {
  padding: 8px 14px; border: 1px solid rgba(242, 183, 5, .5); border-radius: 999px; background: transparent;
  color: #FDE68A; font: inherit; font-weight: 500; cursor: pointer; text-decoration: none;
}

/* ================= Тарифы в окне аккаунта: градиентный фон, PRO — радуга, MAX — огонь ================= */
.plan-cards { isolation: isolate; }  /* свечение карточек — под ними, но над окном */
.plan-card {
  position: relative; border-color: rgba(74, 222, 128, .22);
  background: var(--block-bg);
}
/* бегущая рамка (кольцо из градиента) и мягкое свечение под карточкой */
.plan-card:is([data-plan="pro"], [data-plan="max"])::before,
.plan-card:is([data-plan="pro"], [data-plan="max"])::after {
  content: ""; position: absolute; border-radius: inherit; pointer-events: none;
  background: var(--ring); animation: rainbow-turn 4s linear infinite;
}
.plan-card:is([data-plan="pro"], [data-plan="max"])::before {
  inset: -1px; padding: 1.5px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.plan-card:is([data-plan="pro"], [data-plan="max"])::after { inset: 4px; z-index: -1; filter: blur(16px); opacity: .5; }
.plan-card[data-plan="pro"] {
  --ring: conic-gradient(from var(--rainbow-turn), #22C55E, #15803D, #14A874, #FCC63A, #4ADE80, #22C55E);
  border-color: transparent;
}
.plan-card[data-plan="max"] {
  --ring: conic-gradient(from var(--rainbow-turn), #FF3D00, #FF8A00, #FFD000, #FF5A36, #E11D48, #FF3D00);
  border-color: transparent;
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 138, 0, .2), transparent 70%),
    linear-gradient(180deg, #24152A, #140C1C);
}
/* названия PRO и MAX на карточках — переливаются теми же цветами */
.plan-card .plan-badge[data-plan="pro"], .plan-card .plan-badge[data-plan="max"] {
  border-color: transparent; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-size: 300% 100%; animation: badge-flow 4s linear infinite; font-size: 14px; padding-left: 0;
}
.plan-card .plan-badge[data-plan="pro"] { background-image: linear-gradient(90deg, #4ADE80, #4ADE80, #34D399, #FCD34D, #4ADE80, #4ADE80); }
.plan-card .plan-badge[data-plan="max"] { background-image: linear-gradient(90deg, #FF6A3D, #FFB020, #FFE15A, #FF5A36, #FF6A3D); }
@keyframes badge-flow { to { background-position: 300% 0; } }
/* кнопка «Перейти на MAX» — в огненных цветах */
.plan-card[data-plan="max"] .btn.primary { background: linear-gradient(135deg, #FF5A1F, #FF9F0A); color: #FFFFFF; }
/* цена: зачёркнутая, новая и скидка */
.price-was { color: var(--muted); font-size: 15px; text-decoration-thickness: 1.5px; margin-right: 2px; }
.price-off {
  margin-left: 4px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  background: rgba(74, 222, 128, .16); color: var(--good);
}
@media (prefers-reduced-motion: reduce) {
  .plan-card::before, .plan-card::after, .plan-card .plan-badge { animation: none !important; }
}

/* ================= Блоки и поля без чёрного фона ================= */
.dropzone, .help-tool, .faq, .inbox-item, .demo-input, .demo-sim { background: var(--block-bg); }
textarea, select, .ed-field input, .form input[type="text"], .section-head input[type="search"], .limit-form input,
.acc-field input, .acc-field select, .acc-field textarea, .plan-form select, .ref-link input { background-color: var(--field-bg); }
.composer textarea, .box-main, .box-extra, .pill-field select, .pill-field input { background-color: transparent; }

/* полосы прокрутки везде — как в Gemini: тонкие и прозрачные, проявляются, когда курсор над областью прокрутки.
   :where — без веса: скрытые полосы (вкладки, меню) и свои правила (список чатов) остаются как были */
:where(*) { scrollbar-width: thin; scrollbar-color: transparent transparent; }
:where(*):hover { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
:where(*)::-webkit-scrollbar { width: 8px; height: 8px; }
:where(*)::-webkit-scrollbar-track, :where(*)::-webkit-scrollbar-corner { background: transparent; }
:where(*)::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
:where(*):hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }
:where(*)::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .34); }

/* боковая панель (и меню на телефоне): весь текст белый — просьба пользователя; значки остаются своего цвета */
.sidebar :is(.nav-item, .nav-item.active, .side-link, .side-link:hover, .chat-item, .chat-item-text small, .chat-list-empty,
  .user-name, .user-email, .invite-text small, .brand-name) { color: #FFFFFF; }
/* шрифт боковой панели — как в Gemini: Google Sans Text 14/20, обычная толщина; выбранный пункт — 500;
   второстепенное (даты чатов, почта, бонус за приглашение) — 12 px */
.sidebar :is(.nav-item, .side-link, .chat-item-text span, .user-name, .chat-list-empty) {
  font-family: var(--font-text); font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0;
}
.sidebar :is(.nav-item.active, .chat-item.active .chat-item-text span) { font-weight: 500; }
.sidebar :is(.chat-item-text small, .user-email, .invite-text small) {
  font-family: var(--font-text); font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0;
}
.sidebar .new-chat { font-family: var(--font-text); font-size: 14px; font-weight: 500; letter-spacing: 0; }

/* название тарифа PRO / MAX с переливающимся градиентом: запас снизу и справа — хвосты q и y не обрезаются */
.plan-card .plan-badge[data-plan="pro"], .plan-card .plan-badge[data-plan="max"] {
  padding: 1px .16em .2em 0; margin-right: -.16em; line-height: 1.3;
}

/* ================= Первый вход: язык работы и основной предмет (account.js, openWelcome) =================
   Большое окно в стиле Gemini, вопросы по очереди: сверху логотип, «Шаг 1 из 2» и полоска прогресса; язык — три
   крупные плитки, у выбранной галочка; предмет — «таблетка» с подсказками и частые предметы чипами.
   «Пропустить» нет — оба вопроса обязательные. На телефоне окно — на весь экран, кнопки внизу */
.welcome-dialog {
  width: min(640px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 0; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 28px; background: var(--surface); color: var(--text);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6); font-family: var(--font-text); font-size: 14px;
}
.welcome-dialog[open] { animation: dialog-in .25s cubic-bezier(.2, .8, .2, 1); }
.welcome-dialog:focus { outline: none; }
.welcome-dialog::backdrop { background: rgba(4, 2, 12, .78); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.welcome-form { display: flex; flex-direction: column; gap: 22px; min-height: min(560px, calc(100dvh - 26px)); padding: 32px 36px 28px; }
.welcome-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.welcome-logo {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border);
}
.welcome-logo img { width: 32px; height: 32px; display: block; }
.welcome-step { font: 500 13px/1 var(--font-display); color: var(--muted); }
.welcome-progress { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: -8px; }
.welcome-progress i { height: 4px; border-radius: 99px; background: var(--surface-2); transition: background .3s; }
.welcome-progress i.on { background: var(--accent); }
.welcome-page { display: flex; flex-direction: column; gap: 18px; flex: 1; animation: welcome-page .32s cubic-bezier(.05, .7, .1, 1); }
.welcome-page[hidden] { display: none; }
@keyframes welcome-page { from { opacity: 0; transform: translateX(18px); } }
.welcome-dialog h2 { margin: 6px 0 0; font: 400 30px/1.2 var(--font-display); letter-spacing: -.01em; }
.welcome-text { margin: -8px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.welcome-q { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 8px 0 0; padding: 0; border: 0; }
/* легенда — обычный элемент колонки (float снимает её особое место на рамке fieldset) */
.welcome-q legend { float: left; width: 100%; padding: 0; font: 400 20px/1.3 var(--font-display); }
.welcome-hint { margin: -4px 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.welcome-langs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.welcome-lang {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 76px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2); cursor: pointer;
  font: 500 17px/1.2 var(--font-display); transition: border-color .15s, background .15s, color .15s;
}
.welcome-lang input { position: absolute; opacity: 0; pointer-events: none; }
.welcome-lang svg { display: none; width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.welcome-lang:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.welcome-lang:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: #FFFFFF; }
.welcome-lang:has(input:checked) svg { display: block; }
.welcome-lang:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
/* первый вопрос: школа или колледж — две большие плитки с подписью */
.welcome-langs.welcome-edu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.welcome-edu .welcome-lang { flex-direction: column; gap: 4px; min-height: 96px; }
.welcome-edu .welcome-lang small { font: 400 13px/1.3 var(--font-text); color: var(--muted); }
.welcome-edu .welcome-lang svg { position: absolute; top: 12px; right: 12px; }
.welcome-ui { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; color: var(--muted); cursor: pointer; }
.welcome-ui[hidden] { display: none; }
.welcome-ui input { width: 18px; height: 18px; margin: 0; accent-color: #16A34A; }
.welcome-subject { position: relative; margin-top: 4px; }
.welcome-subject .set-pill { display: flex; width: 100%; min-height: 52px; font-size: 16px; }
.welcome-subject .set-pill input { flex: 1; width: auto; font-size: 16px; }
.welcome-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.welcome-chips[hidden] { display: none; }
.welcome-chip {
  padding: 9px 15px; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text);
  font: 500 14px/1.2 var(--font-display); cursor: pointer; transition: background .15s, border-color .15s;
}
.welcome-chip:hover { background: var(--hover-glass); }
.welcome-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.welcome-error { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.welcome-error[hidden] { display: none; }
.welcome-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }
.welcome-actions .btn { min-width: 120px; height: 44px; border-radius: 999px; }
.welcome-actions .btn[hidden] { display: none; }
.welcome-actions [data-back] { margin-right: auto; }
.welcome-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
/* телефон: окно на весь экран, плитки языка — столбиком, кнопки прижаты к низу */
@media (max-width: 560px) {
  .welcome-dialog { width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .welcome-form { min-height: 100dvh; gap: 20px; padding: calc(20px + env(safe-area-inset-top)) 20px 0; }
  .welcome-dialog h2 { font-size: 26px; }
  .welcome-langs, .welcome-langs.welcome-edu { grid-template-columns: 1fr; }
  .welcome-lang { justify-content: flex-start; min-height: 60px; padding: 10px 18px; }
  .welcome-edu .welcome-lang { align-items: flex-start; min-height: 68px; }
  .welcome-lang svg { margin-left: auto; }
  .welcome-actions {
    position: sticky; bottom: 0; margin: 0 -20px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
    background: var(--surface);
  }
  .welcome-actions .btn { flex: 1; min-width: 0; }
  .welcome-actions [data-back] { margin-right: 0; }
}

/* ================= Презентации: шаблоны школы, диаграммы, «журнальные» шаблоны, показ ================= */
/* «Мои шаблоны»: карточка загрузки и шаблоны школы с картинкой-превью из самого файла PowerPoint */
.tpl-upload .tpl-upload-box {
  aspect-ratio: 16 / 9; border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, var(--border)); border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px;
  color: var(--text); text-align: center; background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.tpl-upload-plus { font: 300 30px/1 var(--font-display); color: var(--accent); }
.tpl-upload-box b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.tpl-upload-box small { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.tpl-upload:disabled { opacity: .7; cursor: progress; }
.tpl-mine { position: relative; display: flex; flex-direction: column; }
.tpl-mine .template-card { flex: 1; }
.tpl-thumb { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.tpl-delete {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 8px; background: rgba(15, 12, 30, .72); color: #fff; opacity: 0; transition: opacity .15s;
}
.tpl-delete svg { width: 16px; height: 16px; }
.tpl-mine:hover .tpl-delete, .tpl-delete:focus-visible { opacity: 1; }
.tpl-delete:hover { background: var(--danger); }
@media (hover: none) { .tpl-delete { opacity: 1; } }
.tpl-mine-note { grid-column: span 2; align-self: center; margin: 0; font-size: 13px; line-height: 1.5; }

/* диаграмма в превью слайда (app.js, chartSvg) — цвета шаблона, как в файле */
.mini .mchart-row { display: flex; gap: 4%; align-items: stretch; }
.mini .mchart { flex: 1; min-width: 0; width: auto; height: 31cqi; stroke: none; }  /* у значков сайта — обводка, здесь не нужна */
.mini .mchart.empty { border: 1px dashed color-mix(in srgb, var(--s-muted) 50%, transparent); border-radius: 6px; }
.mini .chart-note { flex: 0 0 28%; align-self: flex-start; font-size: clamp(6px, 2.6cqi, 10px); line-height: 1.35; }
.mchart text { font-size: 5.6px; fill: var(--s-muted); font-family: var(--s-body, inherit); }
.mchart .ch-axis { stroke: color-mix(in srgb, var(--s-text) 35%, transparent); stroke-width: .5; }
.mchart polyline { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.mchart path { stroke: var(--s-bg); stroke-width: .7; }
.mchart .ch-s0, .mchart .ch-p0 { fill: var(--s-accent); }
.mchart .ch-s1, .mchart .ch-p1 { fill: var(--s-accent2); }
.mchart .ch-s2, .mchart .ch-p2 { fill: color-mix(in srgb, var(--s-accent) 55%, var(--s-text)); }
.mchart .ch-p3 { fill: color-mix(in srgb, var(--s-accent2) 55%, var(--s-text)); }
.mchart .ch-p4 { fill: color-mix(in srgb, var(--s-accent) 45%, var(--s-bg)); }
.mchart .ch-p5 { fill: color-mix(in srgb, var(--s-accent2) 45%, var(--s-bg)); }
.mchart .ch-l0 { stroke: var(--s-accent); }
.mchart .ch-l1 { stroke: var(--s-accent2); }
.mchart .ch-l2 { stroke: color-mix(in srgb, var(--s-accent) 55%, var(--s-text)); }

/* «журнальные» шаблоны: обложка — рубрика с квадратиком и линейкой вверху, крупное название внизу и черта под ним */
[data-title="editorial"] .mini.title:not(.has-photo) .mini-text {
  position: absolute; top: 11%; bottom: 18%; left: 7.5%; width: 72%;
  display: flex; flex-direction: column-reverse; justify-content: space-between;
}
[data-title="editorial"] .mini.title:not(.has-photo) p {
  position: relative; padding: 0 0 3.5% 3.4cqi; border-bottom: 1px solid color-mix(in srgb, var(--s-text) 25%, var(--s-bg));
  color: var(--s-text); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(6px, 2.2cqi, 11px);
}
[data-title="editorial"] .mini.title:not(.has-photo) p::before {
  content: ""; position: absolute; left: 0; top: .15em; width: 1.25cqi; height: 1.25cqi; background: var(--s-accent);
}
[data-title="editorial"] .mini.title:not(.has-photo) h4 { margin: 0; font-size: clamp(14px, 8.4cqi, 40px); line-height: 1.02; }
[data-title="editorial"] .mini.title:not(.has-photo) h4::after {
  content: ""; display: block; width: 10cqi; height: .7cqi; min-height: 2px; margin-top: 4cqi; background: var(--s-accent);
}
/* рубрика над заголовком: квадратик цвета шаблона и строка-«название презентации», под заголовком тонкая линейка */
[data-heading="kicker"] .mhead .bar {
  position: relative; width: 1.1cqi; min-width: 4px; height: auto; aspect-ratio: 1; border-radius: 0; margin-bottom: 4%;
}
[data-heading="kicker"] .mhead .bar::after {
  content: ""; position: absolute; left: calc(100% + 1.4cqi); top: 25%; width: 16cqi; height: 50%;
  background: var(--s-muted); opacity: .45; border-radius: 1px;
}
[data-heading="kicker"] .mhead h4 { padding-bottom: 3%; border-bottom: 1px solid color-mix(in srgb, var(--s-text) 25%, var(--s-bg)); }
/* номер главы на разделителе — огромный и полупрозрачный, как в журнале */
[data-chapter] .mini.section:not(.has-photo)::after {
  content: counter(slide, decimal-leading-zero); position: absolute; right: 3%; bottom: -7%; z-index: 0;
  font: 700 46cqi/1 var(--s-font, inherit); color: var(--s-on, #fff); opacity: .16; letter-spacing: -.02em;
}
[data-chapter] .mini.section .mini-text { position: relative; z-index: 1; }

/* редактор: диаграмма и «Изменить с ИИ» */
.ed-chart { display: flex; flex-direction: column; gap: 10px; }
.ed-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.ed-label em { font-weight: 400; font-style: normal; opacity: .8; }
.ed-item.ed-series { grid-template-columns: 1fr 2fr auto; }
.ed-ai {
  display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.ed-ai input { flex: 1; min-width: 0; padding: 7px 0; border: 0; background: transparent; outline: none; color: var(--text); }
.ed-ai input::placeholder { color: var(--muted); }
.ed-ai:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ai-edit-btn { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap; }
.ai-edit-btn svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
@media (max-width: 560px) {
  .ed-ai { flex-wrap: wrap; padding: 8px 10px; }
  .ed-ai input { flex-basis: 100%; }
  .ai-edit-btn { margin-left: auto; }
}

/* показ презентации в браузере: слайд-превью шириной 320px увеличен под экран (--k — масштаб) */
.show {
  position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; overflow: hidden;
  background: #000; color: #fff; outline: none; cursor: default; user-select: none; touch-action: pan-y;
}
.show-stage { width: 320px; height: 180px; flex-shrink: 0; transform: scale(var(--k, 1)); }
.show-stage .mini { width: 100%; height: 100%; border: 0; border-radius: 0; }
.show-enter { animation: show-fade .45s ease both; }
.show .show-hidden { visibility: hidden; }
.show .show-in { animation: show-rise .5s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes show-fade { from { opacity: 0; } }
@keyframes show-rise { from { opacity: 0; transform: translateY(4px); } }
.show-end { display: grid; place-items: center; width: 100%; height: 100%; font-size: 7px; color: #9CA3AF; }
.show-bar {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px;
  padding: 5px; border-radius: 999px; background: rgba(24, 22, 32, .78); backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35); opacity: 0; transition: opacity .3s;
}
.show.controls .show-bar, .show-bar:focus-within { opacity: 1; }
.show-btn {
  width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: #fff; cursor: pointer;
}
.show-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.show-btn:hover { background: rgba(255, 255, 255, .14); }
.show-count { min-width: 56px; text-align: center; font: 500 14px/1 var(--font-display); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .show-enter, .show .show-in { animation: none; }
}
.calm .show-enter, .calm .show .show-in { animation: none; }

/* ================= Лаборатория: 3D-модели ================= */
#labSim[hidden], #lab3d[hidden] { display: none; }
/* модель и список частей рядом; на узком экране — список под моделью */
.m3d-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; align-items: stretch; }
.m3d-frame { display: flex; }
.m3d-frame iframe { flex: 1; height: auto; aspect-ratio: auto; min-height: 480px; background: #0b0e1b; }
.m3d-parts { display: flex; flex-direction: column; min-height: 0; padding: 16px 10px 10px 16px; }
.m3d-parts h4 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; }
.m3d-parts ul { list-style: none; margin: 0; padding: 0 6px 0 0; overflow-y: auto; flex: 1; max-height: 520px; }
.m3d-parts button {
  display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 9px 10px; border: 1px solid transparent;
  border-radius: 10px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.m3d-parts button:hover { background: var(--hover-glass); }
.m3d-parts button.on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.m3d-parts button b { font-weight: 500; font-size: 14px; }
.m3d-parts button span { color: var(--muted); font-size: 13px; line-height: 1.4; }
.m3d-parts button:not(.on) span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* готовые модели — карточки с картинкой под полем */
.m3d-gallery { max-width: 920px; margin: 30px auto 0; }
.m3d-gallery h2 { margin: 0; font: 500 18px/1.3 var(--font-display); }
.m3d-gallery > p { margin: 4px 0 14px; font-size: 14px; }
.m3d-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.m3d-card {
  display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--border);
  border-radius: 16px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.m3d-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); transform: translateY(-2px); }
.m3d-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.m3d-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: #0b0e1b; }
.m3d-card-text { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; }
.m3d-card-text b { font: 500 15px/1.3 var(--font-display); }
.m3d-card-text span { color: var(--muted); font-size: 13px; }

@media (max-width: 900px) {
  .m3d-layout { grid-template-columns: 1fr; }
  .m3d-frame iframe { min-height: 0; aspect-ratio: 4 / 3.4; }
  .m3d-parts ul { max-height: 300px; }
}

/* «во весь экран» там, где браузер не разрешает полноэкранный режим (iPhone): блок — на всё окно */
.fill-window {
  position: fixed !important; inset: 0; z-index: 2147483000; width: 100vw !important; height: 100vh !important;
  height: 100dvh !important; max-width: none !important; min-height: 0 !important; aspect-ratio: auto !important;
  margin: 0 !important; border-radius: 0 !important; border: 0 !important; background: var(--bg);
}
body.fill-open { overflow: hidden; }
/* на телефоне верх раздела растворяется под шапкой (маска) — она спрятала бы верх модели и опустила её под шапку */
body.fill-open .view { -webkit-mask-image: none; mask-image: none; }
.fill-close {
  position: fixed; z-index: 2147483001; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right));
  display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(15, 11, 30, .78); color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); cursor: pointer;
}
.fill-close svg { width: 20px; height: 20px; }


/* ================= Ошибки и вопросы — как в Google Gemini ================= */
/* ошибка в разделе: строка «ответа» UaqytAI — значок слева, текст обычным цветом, перед ним круглый значок «!»;
   под ним тональная кнопка-таблетка «Повторить» (или «Сменить тариф», если упёрлись в лимит) */
.ai-error { display: flex; gap: 14px; align-items: flex-start; padding: 6px 2px; }
.ai-error .avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; flex-shrink: 0;
}
.ai-error .avatar img { width: 22px; height: 22px; display: block; }
.ai-error-body { flex: 1; min-width: 0; padding-top: 5px; }
.ai-error-body > p, .chat-error { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 22px; color: var(--text); }
.ai-error-icon { display: grid; place-items: center; flex-shrink: 0; width: 22px; height: 22px; }
.ai-error-icon svg { width: 20px; height: 20px; fill: none; stroke: #F2B8B5; stroke-width: 2; stroke-linecap: round; }
.ai-error-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0 32px; }
.ai-error-actions .plan-cta { margin: 0; }
.chat-error { margin-top: 10px; }
.bubble > .chat-error:first-child { margin-top: 0; }
.g-tonal {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px 0 16px; border: 0; border-radius: 999px;
  background: var(--accent-soft); color: var(--text); font: 500 14px/20px var(--font-display); cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.g-tonal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-tonal:hover { background: color-mix(in srgb, var(--accent-soft) 80%, var(--accent)); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.g-tonal:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* «Удалить …?» — окно как в Gemini (ask() в app.js): карточка со скруглением 28px, заголовок Google Sans 400,
   справа кнопки-таблетки «Отмена» (текстовая) и действие (залитая; удаление — красноватая) */
.gm-dialog {
  width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 28px;
  background: var(--surface-2); color: var(--text); box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}
.gm-dialog form { padding: 24px 24px 20px; }
.gm-dialog h2 { margin: 0 0 16px; font: 400 24px/32px var(--font-display); }
.gm-dialog p { margin: 0; font: 400 15px/22px var(--font-text); color: var(--muted); white-space: pre-line; }
.gm-dialog::backdrop { background: rgba(4, 2, 12, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.gm-dialog[open] { animation: gm-in .32s cubic-bezier(.05, .7, .1, 1); }
.gm-dialog[open]::backdrop { animation: gm-fade .25s ease-out; }
@keyframes gm-in { from { opacity: 0; transform: translateY(14px) scale(.95); } }
@keyframes gm-fade { from { opacity: 0; } }
.gm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 28px; }
.gm-btn {
  height: 40px; padding: 0 24px; border: 0; border-radius: 999px; cursor: pointer;
  font: 500 14px/20px var(--font-display); transition: background-color .15s, box-shadow .15s;
}
.gm-btn.text { padding: 0 16px; background: transparent; color: var(--accent); }
.gm-btn.text:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.gm-btn.filled { background: var(--accent); color: #1E1238; }
.gm-btn.filled:hover { background: var(--accent-hover); box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.gm-btn.filled.danger { background: #F2B8B5; color: #601410; }
.gm-btn.filled.danger:hover { background: #F6C9C6; }
.gm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ================= Прикреплённые файлы: в чате и в разделах (app.js, setupAttach) =================
   Как в Gemini: «+» слева внизу поля, файлы — карточками над текстом (миниатюра или значок вида, имя, вид);
   × появляется при наведении (на телефоне — всегда). Перетаскивание — пунктирная рамка и подсказка поверх поля */
/* «+» — как в Gemini: круглая кнопка без рамки и фона, тонкий светло-серый плюс 24 px; при наведении — мягкая
   подсветка круга (state layer), при нажатии чуть плотнее */
.att-add {
  display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: #C4C7C5; cursor: pointer;
  transition: background-color .15s, color .15s;
}
.att-add:hover { background: rgba(227, 227, 227, .08); color: #E3E3E3; }
.att-add:active { background: rgba(227, 227, 227, .12); }
.att-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.att-add svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }
.att-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.att-list[hidden] { display: none; }
.composer .att-list { margin: 0 0 8px; }
.att-chip {
  position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 260px; height: 56px;
  padding: 8px 12px 8px 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2);
  color: var(--text); text-decoration: none; transition: border-color .15s;
}
a.att-chip:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.att-thumb { position: relative; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-badge {
  display: grid; place-items: center; width: 100%; height: 100%;
  font: 600 12px/1 var(--font-display); letter-spacing: .02em; color: var(--muted); background: rgba(255, 255, 255, .06);
}
.att-badge.att-pdf { color: #F28B82; background: rgba(242, 139, 130, .14); }
.att-badge.att-word { color: #8AB4F8; background: rgba(138, 180, 248, .14); }
.att-badge.att-excel { color: #81C995; background: rgba(129, 201, 149, .14); }
.att-badge.att-ppt { color: #FCAD70; background: rgba(252, 173, 112, .14); }
.att-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.att-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.3 var(--font-display); }
.att-info small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.att-spin { display: none; }
.att-chip.is-loading .att-spin {
  display: block; position: absolute; inset: 9px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .25);
  border-top-color: #FFFFFF; animation: spin .8s linear infinite;
}
.att-chip.is-loading .att-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.att-x {
  position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer;
  opacity: 0; transition: opacity .15s;
}
.att-x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.att-chip:hover .att-x, .att-x:focus-visible { opacity: 1; }
@media (hover: none) { .att-x { opacity: 1; } }
/* перетаскивание файлов на поле */
form[data-attach] { position: relative; }
form[data-attach].drag-over { outline: 2px dashed var(--accent); outline-offset: -2px; }
form[data-attach].drag-over::after {
  content: attr(data-drop); position: absolute; inset: 0; z-index: 5; display: grid; place-items: center;
  border-radius: inherit; background: rgba(23, 17, 42, .86); color: var(--text); font: 500 15px/1.3 var(--font-display);
  pointer-events: none;
}
/* файлы в отправленном сообщении — над текстом, справа, как само сообщение */
.msg.user { flex-direction: column; align-items: flex-end; }
.msg-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 88%; margin-bottom: 6px; }
@media (max-width: 760px) {
  .tool-bar .att-add { align-self: flex-start; margin-left: 2px; }
  .att-chip { max-width: 100%; }
}
.composer-bar .att-add + .composer-tools { margin-right: auto; }  /* инструменты — сразу за «+», слева */

/* ===== админ-панель: тарифы и подписки ===== */
.subs-kpis { margin: 2px 0 18px; }
.subs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.subs-chart { border: 1px solid var(--border); border-radius: var(--radius); }
.subs-chart h3, .subs-table-title { margin: 0; font: 500 15px/1.35 var(--font-display); letter-spacing: -.01em; }
.subs-table-title { margin: 4px 0 8px; }
@media (max-width: 900px) { .subs-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .subs-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 5E: фото к этапу и «Пайдалы ресурстар» — карточки-ссылки на платформы */
.fe-photo { margin: 14px 0 6px; max-width: 460px; }
.fe-photo img { display: block; width: auto; max-width: 100%; max-height: 360px; border-radius: 12px; border: 1px solid var(--border); }
.fe-photo figcaption { margin-top: 6px; font-size: 14px; font-style: italic; }
.fe-photo small { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
.fe-res { margin-top: 12px; }
.fe-res h4 { margin: 0 0 8px; }
.fe-res-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.fe-res-item {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; text-decoration: none;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border); transition: border-color .15s, transform .15s;
}
.fe-res-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.fe-res-item b { color: var(--accent); font-size: 14.5px; }
.fe-res-item span { font-size: 13.5px; line-height: 1.4; }
.fe-res-item small { font-size: 12px; color: var(--muted); }

/* ================= Светлая яркая тема: то, что выше зашито под тёмную ================= */
:root[data-theme="light"] .sidebar { border-right: 1px solid var(--border); }
:root[data-theme="light"] .sidebar :is(.nav-item, .side-link, .side-link:hover, .chat-item, .user-name, .brand-name) { color: var(--text); }
:root[data-theme="light"] .sidebar :is(.chat-item-text small, .chat-list-empty, .user-email, .invite-text small) { color: var(--muted); }
:root[data-theme="light"] .sidebar .nav-item.active { color: var(--accent); }
/* у каждого раздела свой яркий значок */
:root[data-theme="light"] .nav-item[data-view="chat"] svg { color: #22C55E; }
:root[data-theme="light"] .nav-item[data-view="docs"] svg { color: #15803D; }
:root[data-theme="light"] .nav-item[data-view="fivee"] svg { color: #166534; }
:root[data-theme="light"] .nav-item[data-view="slides"] svg { color: #EA580C; }
:root[data-theme="light"] .nav-item[data-view="games"] svg { color: #16A34A; }
:root[data-theme="light"] .nav-item[data-view="lab"] svg { color: #0891B2; }
:root[data-theme="light"] .nav-item[data-view="sheets"] svg { color: #059669; }
:root[data-theme="light"] .nav-item[data-view="history"] svg { color: #16A34A; }
/* приветствие — яркий градиент */
:root[data-theme="light"] .chat-empty .hello {
  color: transparent; background: linear-gradient(90deg, #166534, #16A34A 50%, #4ADE80);
  -webkit-background-clip: text; background-clip: text;
}
/* тарифы в окне аккаунта — светлые карточки, MAX с тёплым оттенком */
:root[data-theme="light"] .plan-card { background: var(--block-bg); border-color: var(--border); }
:root[data-theme="light"] .plan-card[data-plan="max"] {
  background: radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 138, 0, .14), transparent 70%), linear-gradient(180deg, #FFFFFF, #FFF7ED);
}
:root[data-theme="light"] .plan-card .plan-badge[data-plan="pro"] { background-image: linear-gradient(90deg, #16A34A, #15803D, #059669, #D97706, #166534, #16A34A); }
:root[data-theme="light"] .plan-card .plan-badge[data-plan="max"] { background-image: linear-gradient(90deg, #EA580C, #D97706, #DC2626, #EA580C); }
:root[data-theme="light"] .in-app-btn { color: #B45309; }
:root[data-theme="light"] .welcome-dialog { box-shadow: 0 30px 80px rgba(17, 24, 39, .18); }
:root[data-theme="light"] .welcome-dialog::backdrop { background: rgba(17, 24, 39, .35); }
:root[data-theme="light"] :where(*):hover { scrollbar-color: rgba(17, 24, 39, .22) transparent; }
:root[data-theme="light"] :where(*):hover::-webkit-scrollbar-thumb { background: rgba(17, 24, 39, .2); }

/* «Как это работает» в разделах — светлые карточки вместо тёмных (31.10.2026) */
:root[data-theme="light"] :is(.demo-paper, .demo-sheet) { box-shadow: 0 12px 30px rgba(17, 24, 39, .1), 0 0 0 1px var(--border); }
:root[data-theme="light"] .demo-slide { box-shadow: 0 8px 20px rgba(17, 24, 39, .12), 0 0 0 1px rgba(17, 24, 39, .06); }
:root[data-theme="light"] .demo-deck.on { --d-bg: #FFF8E7; --d-text: #3B2A06; --d-accent: #D97706; --d-soft: #FEF3C7; }
:root[data-theme="light"] .demo-quiz { background: #FFFFFF; box-shadow: 0 12px 30px rgba(17, 24, 39, .08); }
:root[data-theme="light"] .q-text { color: var(--text); }
:root[data-theme="light"] .q-options > span { background: #F8FAFC; border-color: #E2E8F0; color: var(--text); }
:root[data-theme="light"] .q-win.on { background: #DCFCE7; border-color: #22C55E; }
:root[data-theme="light"] .q-tap { background: rgba(22, 163, 74, .5); }
:root[data-theme="light"] .demo-sim { background: #FFFFFF; box-shadow: 0 12px 30px rgba(17, 24, 39, .08); }
:root[data-theme="light"] .sim-ceiling { background: #94A3B8; }
:root[data-theme="light"] .sim-arm { background: #64748B; }
:root[data-theme="light"] .sim-track { background: #E2E8F0; }
:root[data-theme="light"] .sim-track i { background: #16A34A; box-shadow: 0 0 0 4px rgba(22, 163, 74, .2); }
:root[data-theme="light"] .sim-graph path { stroke: #16A34A; }
:root[data-theme="light"] .demo-done { color: #15803D; background: #F0FDF4; border-color: #86EFAC; }

/* Тарифы (31.10.2026): бегущие цветные рамки; бесплатный — белый, PRO — светло-зелёный, MAX — светло-оранжевый;
   названия PRO и MAX везде — движущийся градиент в цветах их рамок, текст тёмный и чёткий */
:root[data-theme="light"] .plan-card { background: #FFFFFF; border-color: var(--border); box-shadow: 0 6px 20px rgba(17, 24, 39, .06); }
:root[data-theme="light"] .plan-card[data-plan="pro"] { border-color: transparent; background: linear-gradient(180deg, #F0FDF4, #DCFCE7); }
:root[data-theme="light"] .plan-card[data-plan="max"] { border-color: transparent; background: linear-gradient(180deg, #FFF7ED, #FFEDD5); }
:root[data-theme="light"] .plan-card:is([data-plan="pro"], [data-plan="max"])::before { padding: 2px; }
:root[data-theme="light"] .plan-card:is([data-plan="pro"], [data-plan="max"])::after { opacity: .35; }
:root[data-theme="light"] .plan-card :is(.plan-price b, .plan-list li.yes) { color: #111827; }
:root[data-theme="light"] .plan-card .plan-popular { color: #15803D; }
:root[data-theme="light"] .plan-card .plan-list li.no { color: #6B7280; opacity: 1; }
:root[data-theme="light"] .plan-badge:is([data-plan="pro"], [data-plan="max"]) {
  color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-size: 300% 100%; animation: plan-flow 4s linear infinite; font-weight: 800;
}
:root[data-theme="light"] .plan-badge[data-plan="pro"] { background-image: linear-gradient(90deg, #15803D, #16A34A, #0D9488, #CA8A04, #16A34A, #15803D); border-color: #86EFAC; }
:root[data-theme="light"] .plan-badge[data-plan="max"] { background-image: linear-gradient(90deg, #EA580C, #DC2626, #D97706, #E11D48, #EA580C); border-color: #FDBA74; }
:root[data-theme="light"] .plan-card .plan-badge:is([data-plan="pro"], [data-plan="max"]) { border-color: transparent; font-size: 15px; }
@keyframes plan-flow { to { background-position: 300% 0; } }
.calm .plan-badge { animation: none !important; }
:root[data-theme="light"] .plan-badge[data-plan="admin"] { background: #DCFCE7; color: #15803D; border-color: #86EFAC; }
:root[data-theme="light"] .plan-current[data-plan="max"] { border-color: #FDBA74; }

/* новые сообщения в чате всплывают плавно: вопрос учителя — справа, ответ ИИ — снизу (31.10.2026) */
.msg.enter { animation: msg-in .5s cubic-bezier(.2, .8, .2, 1) both; }
.msg.user.enter { animation-name: msg-in-user; }
@keyframes msg-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes msg-in-user { from { opacity: 0; transform: translate(18px, 10px) scale(.97); } }
.calm .msg.enter { animation: none; }
@media (prefers-reduced-motion: reduce) { .msg.enter { animation: none; } }

/* ================= «Огонёк»: дни подряд на платформе — справа вверху, перед остатком токенов (31.10.2026) ================= */
.streak-wrap { position: relative; }
.streak-pill {
  display: inline-flex; align-items: center; gap: 0; height: 40px; padding: 0 13px 0 8px;
  border: 1px solid #FED7AA; border-radius: 999px; background: linear-gradient(180deg, #FFFFFF, #FFF7ED); color: #C2410C;
  font: 700 15px/1 var(--font-display); cursor: pointer; transition: transform .15s, box-shadow .2s;
}
.streak-pill:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(234, 88, 12, .18); }
.streak-pill:focus-visible { outline: 2px solid #EA580C; outline-offset: 2px; }
.streak-fire { width: 22px; height: 22px; transform-origin: 50% 90%; animation: fire-flicker 1.8s ease-in-out infinite; }
.streak-pill.hot .streak-fire { filter: drop-shadow(0 0 5px rgba(249, 115, 22, .55)); }
@keyframes fire-flicker { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.06, .96) rotate(-3deg); } 60% { transform: scale(.97, 1.05) rotate(2deg); } }
.calm .streak-fire { animation: none; }
@media (prefers-reduced-motion: reduce) { .streak-fire { animation: none; } }
.streak-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 30; width: 300px; padding: 18px;
  border-radius: 18px; background: #FFFFFF; border: 1px solid var(--border); box-shadow: 0 20px 50px rgba(17, 24, 39, .16);
  animation: rise .25s ease both;
}
.streak-pop-head { display: flex; align-items: center; gap: 12px; }
.streak-big .streak-fire { width: 46px; height: 46px; }
.streak-pop-head b { display: block; font: 600 18px/1.2 var(--font-display); color: #111827; }
.streak-pop-head small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.streak-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 16px; text-align: center; }
.streak-week span { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.streak-week i {
  width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-style: normal;
  font-size: 13px; font-weight: 700; color: #FFFFFF; background: #F1F5F9; border: 1px solid #E2E8F0;
}
.streak-week .on i { background: linear-gradient(160deg, #FB923C, #EA580C); border-color: transparent; }
.streak-week .today i { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #FDBA74; }
.streak-week small { font-size: 11px; color: var(--muted); text-transform: capitalize; }
.streak-hint { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
@media (max-width: 640px) {
  .streak-pill { height: 34px; padding: 0 10px 0 8px; font-size: 13px; }
  .streak-fire { width: 18px; height: 18px; }
  .streak-pop { position: fixed; top: 64px; right: 12px; left: 12px; width: auto; }
}
.streak-fire, .streak-fire path { stroke: none; }

/* ================= Обучение по кнопкам после первого входа (account.js, startTour) =================
   Вокруг подсвеченной кнопки — светлая рамка, всё остальное затемнено огромной тенью; рядом — карточка-подсказка */
.tour-layer { position: fixed; inset: 0; z-index: 10000; }
.tour-ring {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 3px #22C55E, 0 0 0 7px rgba(34, 197, 94, .35), 0 0 0 9999px rgba(15, 23, 42, .55);
  transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1), width .35s, height .35s;
}
.tour-tip {
  position: fixed; width: min(340px, calc(100vw - 24px)); padding: 18px 18px 14px; border-radius: 18px;
  background: #FFFFFF; color: #111827; box-shadow: 0 24px 60px rgba(15, 23, 42, .3);
  transition: left .35s cubic-bezier(.2, .8, .2, 1), top .35s cubic-bezier(.2, .8, .2, 1);
}
.tour-count { font-size: 12px; font-weight: 600; color: #15803D; }
.tour-tip h3 { margin: 4px 0 6px; font: 600 18px/1.25 var(--font-display); }
.tour-tip p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #374151; }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-gap { flex: 1; }
.tour-skip { border: 0; background: none; padding: 6px 4px; color: #6B7280; font-size: 13.5px; cursor: pointer; }
.tour-skip:hover { color: #111827; text-decoration: underline; }
.calm .tour-ring, .calm .tour-tip { transition: none; }
@media (prefers-reduced-motion: reduce) { .tour-ring, .tour-tip { transition: none; } }
#tourAgain { margin-top: 12px; }

/* Mini (31.10.2026) — бирюзовый: светлый фон, бегущая рамка, движущийся градиент названия */
.plan-card[data-plan="mini"]::before, .plan-card[data-plan="mini"]::after {
  content: ""; position: absolute; border-radius: inherit; pointer-events: none;
  background: var(--ring); animation: rainbow-turn 4s linear infinite;
}
.plan-card[data-plan="mini"]::before {
  inset: -1px; padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.plan-card[data-plan="mini"]::after { inset: 4px; z-index: -1; filter: blur(16px); opacity: .3; }
:root[data-theme="light"] .plan-card[data-plan="mini"] {
  --ring: conic-gradient(from var(--rainbow-turn), #2DD4BF, #0F766E, #14B8A6, #99F6E4, #0D9488, #2DD4BF);
  border-color: transparent; background: linear-gradient(180deg, #F0FDFA, #CCFBF1);
}
:root[data-theme="light"] .plan-badge[data-plan="mini"] {
  color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-size: 300% 100%; animation: plan-flow 4s linear infinite; font-weight: 800; border-color: #5EEAD4;
  background-image: linear-gradient(90deg, #0F766E, #0D9488, #14B8A6, #0E7490, #0F766E);
}
:root[data-theme="light"] .plan-card .plan-badge[data-plan="mini"] { border-color: transparent; font-size: 15px; }
:root[data-theme="light"] .plan-card[data-plan="mini"] .btn.primary { background: linear-gradient(135deg, #14B8A6, #0F766E); color: #FFFFFF; }
.plan-current[data-plan="mini"] { border-color: #5EEAD4; }

/* ================= Огонёк вырос — вспышка на весь экран (account.js, celebrateStreak) ================= */
.streak-burst {
  position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center; cursor: pointer;
  background: radial-gradient(circle at 50% 45%, rgba(255, 237, 213, .92), rgba(255, 255, 255, .86) 45%, rgba(255, 255, 255, .8));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: sb-in .35s ease both;
}
.streak-burst.out { animation: sb-out .4s ease both; }
@keyframes sb-in { from { opacity: 0; } }
@keyframes sb-out { to { opacity: 0; } }
.sb-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 24px; }
.sb-fire { position: relative; width: 170px; height: 170px; display: grid; place-items: center; }
.sb-fire .streak-fire {
  width: 150px; height: 150px; animation: sb-pop .9s cubic-bezier(.2, 1.6, .4, 1) both, fire-flicker 1.6s ease-in-out .9s infinite;
  filter: drop-shadow(0 0 24px rgba(249, 115, 22, .6)) drop-shadow(0 0 60px rgba(250, 204, 21, .45));
}
@keyframes sb-pop { 0% { transform: scale(.2); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.sb-fire i {
  position: absolute; left: 50%; top: 55%; width: 10px; height: 10px; margin: -5px; border-radius: 50%;
  background: radial-gradient(circle, #FDE68A, #F97316); opacity: 0;
  animation: sb-spark 1.1s ease-out calc(.35s + var(--d)) both;
}
@keyframes sb-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateY(-120px) scale(.3); }
}
.sb-num { position: relative; height: 72px; overflow: hidden; font: 800 64px/72px var(--font-display); color: #EA580C; }
.sb-num span { display: block; }
.sb-num .old { animation: sb-up .5s cubic-bezier(.6, 0, .3, 1) .7s both; }
.sb-num .new { animation: sb-up .5s cubic-bezier(.6, 0, .3, 1) .7s both; }
@keyframes sb-up { to { transform: translateY(-72px); } }
.sb-card b { font: 700 26px/1.2 var(--font-display); color: #111827; animation: rise .5s ease 1s both; }
.sb-card small { font-size: 15px; color: #6B7280; animation: rise .5s ease 1.15s both; }
.calm .streak-burst *, .calm .streak-burst { animation: none !important; }
.calm .sb-num .old { display: none; }
@media (prefers-reduced-motion: reduce) { .streak-burst *, .streak-burst { animation: none !important; } .sb-num .old { display: none; } }

/* ================= Цвета тарифов по «температуре» (31.10.2026, просьба владельца) =================
   Mini — холодный (ледяной голубой), PRO — теплее (золотой янтарь), MAX — тёплый (огонь). Перекрывают правила выше */
:root[data-theme="light"] .plan-card[data-plan="mini"] {
  --ring: conic-gradient(from var(--rainbow-turn), #22D3EE, #0891B2, #38BDF8, #A5F3FC, #0E7490, #22D3EE);
  background: linear-gradient(180deg, #ECFEFF, #CFFAFE);
}
:root[data-theme="light"] .plan-card[data-plan="pro"] {
  --ring: conic-gradient(from var(--rainbow-turn), #FACC15, #EAB308, #F59E0B, #FDE68A, #CA8A04, #FACC15);
  background: linear-gradient(180deg, #FEFCE8, #FEF3C7);
}
:root[data-theme="light"] .plan-card[data-plan="max"] {
  --ring: conic-gradient(from var(--rainbow-turn), #FF3D00, #F97316, #E11D48, #FB923C, #DC2626, #FF3D00);
  background: linear-gradient(180deg, #FFF7ED, #FFE4E6);
}
:root[data-theme="light"] .plan-badge[data-plan="mini"] { background-image: linear-gradient(90deg, #0E7490, #0891B2, #0284C7, #0369A1, #0E7490); border-color: #A5F3FC; }
:root[data-theme="light"] .plan-badge[data-plan="pro"] { background-image: linear-gradient(90deg, #A16207, #CA8A04, #D97706, #B45309, #A16207); border-color: #FDE68A; }
:root[data-theme="light"] .plan-badge[data-plan="max"] { background-image: linear-gradient(90deg, #DC2626, #EA580C, #E11D48, #C2410C, #DC2626); border-color: #FDA4AF; }
:root[data-theme="light"] .plan-card .plan-badge:is([data-plan="mini"], [data-plan="pro"], [data-plan="max"]) { border-color: transparent; }
:root[data-theme="light"] .plan-card[data-plan="mini"] .btn.primary { background: linear-gradient(135deg, #06B6D4, #0369A1); color: #FFFFFF; }
:root[data-theme="light"] .plan-card[data-plan="pro"] .btn.primary { background: linear-gradient(135deg, #F59E0B, #D97706); color: #FFFFFF; }
:root[data-theme="light"] .plan-card[data-plan="max"] .btn.primary { background: linear-gradient(135deg, #F97316, #DC2626); color: #FFFFFF; }
:root[data-theme="light"] .plan-card .plan-popular { color: #B45309; }
:root[data-theme="light"] .plan-card.featured { border-color: transparent; }
:root[data-theme="light"] .plan-current[data-plan="mini"] { border-color: #A5F3FC; }
:root[data-theme="light"] .plan-current[data-plan="pro"] { border-color: #FDE68A; }
:root[data-theme="light"] .plan-current[data-plan="max"] { border-color: #FDA4AF; }
:root[data-theme="light"] .plan-card .plan-badge[data-plan="mini"] { background-image: linear-gradient(90deg, #0E7490, #0891B2, #0284C7, #0369A1, #0E7490); }
:root[data-theme="light"] .plan-card .plan-badge[data-plan="pro"] { background-image: linear-gradient(90deg, #A16207, #CA8A04, #D97706, #B45309, #A16207); }
:root[data-theme="light"] .plan-card .plan-badge[data-plan="max"] { background-image: linear-gradient(90deg, #DC2626, #EA580C, #E11D48, #C2410C, #DC2626); }
#streakNum { margin-left: -3px; }  /* у пламени в значке пустые поля по бокам — число вплотную к огоньку */

/* «Викторина!»: выделены только бегущая рамка и текст — без размытого свечения и квадратного фона (31.10.2026) */
.mode-tab.rainbow::after { display: none; }
:root[data-theme="light"] .mode-tab.rainbow, :root[data-theme="light"] .mode-tab.rainbow.active,
:root[data-theme="light"] .mode-tab.rainbow:hover { background: transparent; box-shadow: none; }
:root[data-theme="light"] .mode-tab.rainbow.active { color: #15803D; font-weight: 700; }
/* выбранная «Викторина!» — на белом фоне (поверх правила выше) */
:root[data-theme="light"] .mode-tab.rainbow.active { background: #FFFFFF; }

.streak-pill .streak-fire { position: relative; top: -2px; }  /* огонёк чуть выше числа — по просьбе владельца */

/* предпросмотр документа: QR-коды к ссылкам и на видео, фото к заданиям БЖБ / ТЖБ (как в файле Word) */
.doc-qr { display: block; width: 96px; height: 96px; margin-top: 6px; background: #FFFFFF; border-radius: 6px; }
.doc-qr.small { width: 64px; height: 64px; }
.doc-qr-block { display: flex; align-items: center; gap: 14px; margin: 14px 0; }
.doc-qr-block p { margin: 0; font-size: 14px; }
.doc-qr-block a { display: block; margin-top: 4px; }
.doc-task-photo { max-width: 320px; margin: 8px auto; text-align: center; }

/* ================= Сергіту сәті (физминутка) ================= */
.energ-start { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 8px; text-align: center; }
.energ-start h3 { margin: 0; font: 600 26px/1.2 var(--font-display); }
.energ-start p { margin: 0; max-width: 560px; color: var(--muted); }
.energ-big { font-size: 84px; line-height: 1; animation: energ-bounce 1.2s ease-in-out infinite; }
.energ-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 6px 0 8px; }
.energ-list span { padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: 14px; }
.energ-dots { display: inline-flex; gap: 6px; }
.energ-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.energ-dots i.done { background: #22C55E; }
.energ-dots i.now { background: #F97316; box-shadow: 0 0 0 3px rgba(249, 115, 22, .25); }
.energ-move { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 26px 8px; }
.energ-emoji { font-size: clamp(72px, 12vw, 150px); line-height: 1; animation: energ-bounce 1s ease-in-out infinite; }
.energ-move.paused .energ-emoji { animation-play-state: paused; opacity: .6; }
.energ-text h3 { margin: 0 0 8px; font: 700 clamp(24px, 3vw, 40px)/1.15 var(--font-display); }
.energ-text p { margin: 0; font-size: clamp(17px, 2vw, 26px); line-height: 1.4; }
.energ-timer { position: relative; width: clamp(110px, 14vw, 170px); aspect-ratio: 1; display: grid; place-items: center; }
.energ-timer svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.energ-ring-bg { fill: none; stroke: var(--surface-2); stroke-width: 10; }
.energ-ring-fg { fill: none; stroke: #F97316; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.energ-num { position: relative; font: 800 clamp(34px, 4.5vw, 56px)/1 var(--font-display); color: #EA580C; }
.energ-timer small { position: absolute; bottom: 24%; font-size: 13px; color: var(--muted); }
.energ-actions { display: flex; justify-content: center; gap: 10px; }
@keyframes energ-bounce { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-14px) scale(1.05, .95); } 60% { transform: translateY(-6px) scale(.97, 1.03); } }
@media (max-width: 720px) { .energ-move { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 16px; } }

/* ================= Эмодзи пікір (рефлексия) ================= */
.emo-hint { margin: -4px 0 16px; text-align: center; color: var(--muted); }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.emo-btn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 12px 16px;
  border-radius: 22px; border: 2px solid var(--border); background: var(--surface); cursor: pointer;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.emo-btn:hover { border-color: #FDBA74; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(249, 115, 22, .15); }
.emo-e { font-size: clamp(54px, 7vw, 92px); line-height: 1; }
.emo-l { font: 600 16px/1.2 var(--font-display); color: var(--text); text-align: center; }
.emo-count {
  position: absolute; top: 10px; right: 12px; min-width: 30px; padding: 3px 8px; border-radius: 999px;
  background: #F97316; color: #FFFFFF; font: 700 15px/1.2 var(--font-display);
}
.emo-count:empty { display: none; }
.emo-btn.pop .emo-e { animation: emo-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes emo-pop { 0% { transform: scale(1); } 40% { transform: scale(1.3) rotate(-6deg); } 100% { transform: scale(1); } }
.emo-actions { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.emo-bars { display: flex; flex-direction: column; gap: 12px; }
.emo-bar { display: grid; grid-template-columns: 52px minmax(90px, 160px) 1fr 54px 84px; align-items: center; gap: 12px; }
.emo-bar-e { font-size: 40px; line-height: 1; text-align: center; }
.emo-bar-l { font-weight: 600; }
.emo-bar-track { height: 18px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.emo-bar-track i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #FB923C, #F97316); animation: emo-grow .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes emo-grow { from { width: 0; } }
.emo-bar b { font: 700 18px/1 var(--font-display); text-align: right; }
.emo-bar small { color: var(--muted); }
.emo-summary { display: flex; flex-direction: column; gap: 12px; align-items: stretch; padding: 8px 0; }
.emo-summary h3 { margin: 0 0 4px; text-align: center; font: 600 24px/1.2 var(--font-display); }
.emo-sum-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: var(--surface-2); }
.emo-sum-e { font-size: 42px; line-height: 1; }
.emo-sum-row b { display: block; }
.emo-sum-row small { color: var(--muted); }
.emo-summary .btn { align-self: center; margin-top: 6px; }
@media (max-width: 640px) { .emo-bar { grid-template-columns: 40px 1fr 48px; } .emo-bar-l, .emo-bar small { display: none; } }
.calm .energ-big, .calm .energ-emoji, .calm .emo-btn.pop .emo-e, .calm .emo-bar-track i { animation: none; }

/* пробная попытка Лаборатории в бесплатном тарифе: не замок, а приглашение попробовать */
.plan-lock.trial { border-color: #FED7AA; background: linear-gradient(90deg, #FFF7ED, #FFFFFF); }
.plan-lock.trial > span { color: #9A3412; }

/* ================= Разогрев: полки готовых физминуток и рефлексий ================= */
:root[data-theme="light"] .nav-item[data-view="warmup"] svg { color: #EA580C; }
.warm-shelf, .warm-own { max-width: 920px; margin: 0 auto 30px; }
.warm-h { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font: 600 20px/1.3 var(--font-display); }
.warm-h svg { width: 24px; height: 24px; fill: none; stroke: #EA580C; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.warm-shelf > .muted { margin: 0 0 14px; }
.warm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.warm-card {
  display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: 0 6px 18px rgba(17, 24, 39, .05); transition: transform .2s, box-shadow .2s;
}
.warm-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(234, 88, 12, .14); }
.warm-peek {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 12px; border-radius: 14px;
  background: linear-gradient(160deg, #FFF7ED, #FFEDD5);
}
.warm-card.emoji .warm-peek { background: linear-gradient(160deg, #FEFCE8, #FEF3C7); }
.warm-main { font-size: 46px; line-height: 1; }
.warm-card:hover .warm-main { animation: energ-bounce 1s ease-in-out infinite; }
.warm-row { display: flex; gap: 6px; font-size: 20px; }
.warm-row i { font-style: normal; }
.warm-card h3 { margin: 4px 0 0; font: 600 16px/1.3 var(--font-display); }
.warm-card p { margin: 0; flex: 1; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.warm-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.warm-foot small { color: var(--muted); font-size: 12.5px; }
.warm-own .mode-tabs { margin: 12px 0 12px; }
#warmPanel .result { max-width: 920px; margin: 0 auto; }
.calm .warm-card:hover .warm-main { animation: none; }

/* «Как это работает» — «Найди пару»: карточки в две колонки, найденная пара загорается зелёным */
.demo-match { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; padding: 16px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--border); }
.dm-card { padding: 9px 12px; border-radius: 10px; font-size: 13px; text-align: center; background: #F8FAFC; border: 1px solid #E2E8F0; transition: background-color .35s, border-color .35s, transform .35s; }
.dm-card.on { background: #DCFCE7; border-color: #22C55E; transform: scale(1.04); }
/* «Верно или неверно»: утверждение, две кнопки, верная загорается */
.demo-tf { padding: 16px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--border); }
.dtf-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dtf-btns > span { padding: 10px; border-radius: 10px; text-align: center; font-size: 13px; background: #F8FAFC; border: 1px solid #E2E8F0; transition: background-color .35s, border-color .35s; }
.dtf-btns b { font-weight: 500; }
.dtf-yes.on { background: #DCFCE7; border-color: #22C55E; }
/* кроссворд: пустые клетки, буквы появляются по словам */
.demo-cw { display: grid; gap: 3px; justify-content: center; padding: 16px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--border); }
.demo-cw i { display: grid; place-items: center; border-radius: 5px; background: #F8FAFC; border: 1.5px solid #CBD5E1; font-style: normal; }
.demo-cw b { font: 700 13px/1 var(--font-display); color: #15803D; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s; }
.demo-cw i.on b { opacity: 1; transform: none; }
.demo-cw i.on { border-color: #22C55E; background: #F0FDF4; }
.demo-stage[hidden] { display: none; }  /* у каждой игры своя анимация — чужие спрятаны */
.dm-card.a2.on, .dm-card.b2.on { background: #FEF3C7; border-color: #F59E0B; }  /* вторая пара — другим цветом: видно, что с чем соединилось */

/* ================= Игры-разминки: «Дирижёр», «Повтори движение», «Повтори ритм» ================= */
.warm-card.game .warm-peek { background: linear-gradient(160deg, #ECFEFF, #CFFAFE); }
.warm-speed { display: inline-flex; gap: 6px; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); }
.warm-speed button { border: 0; background: none; padding: 7px 16px; border-radius: 999px; font: 500 14px var(--font-display); color: var(--muted); cursor: pointer; }
.warm-speed button.on { background: #FFFFFF; color: #EA580C; box-shadow: 0 1px 3px rgba(17, 24, 39, .12); }
.cond-stage { display: grid; place-items: center; min-height: 300px; }
.cond-sign { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 48px; border-radius: 32px; background: linear-gradient(160deg, #FFF7ED, #FFEDD5); }
.cond-sign.freeze { background: linear-gradient(160deg, #F0FDFA, #CCFBF1); }
.cond-sign.beat { animation: cond-beat .45s cubic-bezier(.2, 1.6, .4, 1); }
.cond-emoji { font-size: clamp(90px, 14vw, 170px); line-height: 1; }
.cond-name { font: 800 clamp(26px, 4vw, 48px)/1.1 var(--font-display); color: #9A3412; text-align: center; }
.cond-sign.freeze .cond-name { color: #0F766E; }
.cond-time { font: 700 18px var(--font-display); color: #EA580C; }
@keyframes cond-beat { 0% { transform: scale(.85); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.copy-dots { display: flex; justify-content: center; gap: 8px; margin: 14px 0 6px; }
.copy-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--border); transition: background-color .3s; }
.copy-dots i.on { background: #F97316; }
.copy-chain { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 30px 0 24px; }
.copy-item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 110px; padding: 16px 12px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border); animation: rise .45s ease both; animation-delay: var(--d); }
.copy-item span { font-size: 56px; line-height: 1; }
.copy-item small { font: 600 14px/1.2 var(--font-display); text-align: center; }
.rh-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; padding: 46px 0 34px; }
.rh-row i { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; font-style: normal; font-size: 40px; background: var(--surface-2); border: 2px solid var(--border); }
.rh-row i.short { width: 62px; height: 62px; font-size: 28px; }
.rh-row i.low { border-color: #FDBA74; }
.rh-row i.hit { animation: rh-hit .3s ease-out; background: #FFEDD5; border-color: #F97316; }
.rh-row.your-turn i { background: #F0FDF4; border-color: #86EFAC; }
@keyframes rh-hit { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.calm .cond-sign.beat, .calm .rh-row i.hit, .calm .copy-item { animation: none; }
.warm-panel[hidden], #gamesForm[hidden], .tool-demo[hidden] { display: none; }

/* ================= «Пазл» ================= */
.pz-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 6px 0 10px; }
.pz-thumb { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 120px; padding: 8px; border-radius: 16px; border: 2px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color .2s, transform .2s; }
.pz-thumb:hover { border-color: #F97316; transform: translateY(-2px); }
.pz-thumb img { width: 100%; aspect-ratio: 1; border-radius: 10px; display: block; }
.pz-thumb span { font: 600 13px/1.2 var(--font-display); }
.pz-own b { display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 10px; background: var(--surface-2); font-size: 40px; color: #EA580C; }
.pz-board { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; width: min(100%, 520px, 60vh); aspect-ratio: 1; margin: 16px auto; padding: 3px; border-radius: 16px; background: var(--border); }
.pz-cell { border: 0; padding: 0; border-radius: 6px; cursor: pointer; transition: transform .15s, box-shadow .2s, outline-color .2s; outline: 3px solid transparent; outline-offset: -3px; }
.pz-cell:hover { transform: scale(.97); }
.pz-cell.ok { outline-color: rgba(34, 197, 94, .7); }
.pz-cell.picked { outline-color: #F97316; transform: scale(.93); box-shadow: 0 0 0 4px rgba(249, 115, 22, .35); }
.pz-board.peek .pz-cell { visibility: hidden; }
.pz-board.peek { background: var(--art) center / cover; }
.pz-done { width: min(320px, 70%); border-radius: 18px; box-shadow: 0 16px 40px rgba(17, 24, 39, .2); }

/* ҚМЖ: галочка «Задания для ученика с ООП» — в одном ряду с остальными полями шапки */
.pill-check { gap: 8px; cursor: pointer; }
.pill-check input { width: 16px; height: 16px; accent-color: #16A34A; margin: 0; }