/* Урок Просто — направление v2 (холст). Основа — палитра /app (Main.dc.html). Подключать после ds/urok-prosto/tokens.css. */
.v2-root {
  --ws-action: #1f1b3a; --ws-action-hover: #353057; --ws-on-action: #ffffff;
  --ws-accent: #4b40b8; --ws-accent-soft: #f1f0fa; --ws-accent-edge: #e2dff2; --ws-accent-ink: #2a2462;
  --ws-icon-bg: #f1f0f5; --ws-icon: #6c6880;
  --ws-bar: #e4e2ec; --ws-bar-active: #3b3478;
  --ws-btn-border: #d4d1df; --ws-accent-border: #c3bde6;
  --sb-bg: #efedf6; --sb-hover: rgba(31, 27, 58, 0.06); --sb-active: rgba(31, 27, 58, 0.09);
}
.v2-root[data-theme="dark"] {
  --ws-action: #efecfb; --ws-action-hover: #ffffff; --ws-on-action: #1f1b3a;
  --ws-accent: #b3a8ff; --ws-accent-soft: #29244a; --ws-accent-edge: #3a3466; --ws-accent-ink: #ddd8ff;
  --ws-icon-bg: #28234a; --ws-icon: #aaa4c4;
  --ws-bar: #352f5e; --ws-bar-active: #b3a8ff;
  --ws-btn-border: #4a4475; --ws-accent-border: #5d55a0;
  --sb-bg: #110e22; --sb-hover: rgba(239, 236, 251, 0.07); --sb-active: rgba(239, 236, 251, 0.11);
}
.v2-root * { box-sizing: border-box; }
.v2-root button, .v2-root input, .v2-root select, .v2-root textarea { font-family: inherit; }
.v2-root :focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 2px; }

/* Боковое меню в духе ChatGPT: светлая панель, округлые пункты без рамок */
.sb-item:hover { background: var(--sb-hover) !important; }
.sb-item-on:hover { background: var(--sb-active) !important; }
.sb-ghost:hover { background: var(--sb-hover) !important; color: var(--ink) !important; }

/* Кнопки */
.ws-btn-primary:hover:not(:disabled) { background: var(--ws-action-hover) !important; }
.ws-btn-primary:active:not(:disabled) { transform: scale(.98); }
.ws-btn-primary:disabled { cursor: progress; }
.ws-btn-secondary:hover:not(:disabled) { border-color: var(--ws-accent) !important; color: var(--ws-accent) !important; background: var(--ws-accent-soft) !important; }
.ws-btn-secondary:active:not(:disabled) { transform: scale(.97); }
.ws-btn-secondary:disabled { opacity: .6; cursor: default; }
.ws-ghost:hover { background: var(--bg) !important; color: var(--ink) !important; }

/* Выбор: невыбранное — серая рамка, акцент только у выбранного и при наведении */
.ws-chip-off:hover { border-color: var(--ws-accent) !important; color: var(--ws-accent) !important; }
.ws-tab-off:hover { color: var(--ink) !important; }

/* Поиск */
.ws-search:hover { border-color: var(--line-strong) !important; }
.ws-search:focus-within { border-color: var(--ws-accent) !important; background: var(--surface) !important; }
.ws-search input::placeholder { color: var(--text-2); }

/* Карточки-ссылки */
.ws-tool:hover { border-color: var(--ws-accent-border) !important; box-shadow: var(--shadow-card); transform: translateY(-1px); }
.ws-tool:hover .ws-tile, .ws-recent:hover .ws-tile { background: var(--ws-accent-soft) !important; color: var(--ws-accent) !important; }
.ws-tool:hover .ws-tool-title { color: var(--ws-accent) !important; }
.ws-recent:hover { background: var(--bg) !important; }
.ws-link:hover { color: var(--ws-accent-ink) !important; }
.ws-arrow:hover { border-color: var(--ws-accent) !important; color: var(--ws-accent) !important; }
.ws-pop-card:hover { border-color: var(--ws-accent-edge) !important; box-shadow: var(--shadow-card); }
.ws-pop-card:hover .ws-pop-title { color: var(--ws-accent-ink) !important; }
.ws-done:hover { filter: brightness(.95); }

/* Сетки экрана /app */
.ws-pad { padding-left: 16px; padding-right: 16px; }
.ws-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.ws-aside { display: grid; gap: 24px; min-width: 0; align-items: start; }
.ws-bundle { padding: 20px; }
.ws-tools { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.ws-pop { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: none; }
.ws-pop::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .ws-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ws-pop { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (min-width: 768px) { .ws-pad { padding-left: 32px; padding-right: 32px; } .ws-bundle { padding: 28px; } .ws-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ws-pop { grid-auto-columns: calc((100% - 40px) / 3); } }
@media (min-width: 1280px) { .ws-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); } .ws-aside { grid-template-columns: minmax(0, 1fr); } .ws-pop { grid-auto-columns: calc((100% - 60px) / 4); } }

/* Движение */
@keyframes ws-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes ws-badge-in { 0% { opacity: 0; transform: translateX(14px) scale(.86); } 60% { opacity: 1; transform: translateX(-2px) scale(1.04); } 100% { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes ws-fade-in { 0% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ws-count { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes ws-spin { to { transform: rotate(360deg); } }
.ws-shimmer { animation: ws-shimmer 1.4s ease-in-out infinite; }
.ws-badge-in { animation: ws-badge-in .45s cubic-bezier(.2, .8, .2, 1) both; }
.ws-fade { animation: ws-fade-in .25s ease-out both; }
.ws-count { animation: ws-count .3s ease-out both; }
.ws-spin { display: inline-grid; animation: ws-spin 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ws-shimmer, .ws-badge-in, .ws-fade, .ws-count, .ws-spin { animation: none !important; } }

/* Формы генерации — варианты А и Б, экран документа (02.11) */
.f-layout, .f-panel-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.f-row-lt, .f-row4 { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: end; }
.f-row-sg { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 132px; align-items: end; }
@media (min-width: 640px) { .f-row-lt { grid-template-columns: minmax(0, 1fr) auto; } .f-row4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .f-panel-layout { grid-template-columns: minmax(0, 1fr) 400px; }
  .f-panel-sticky { position: sticky; top: 24px; }
  .f-row4 { grid-template-columns: minmax(0, 1fr) 132px minmax(0, 1.8fr) auto; }
}
@media (min-width: 1200px) { .f-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .f-sticky { position: sticky; top: 24px; } }
.f-seg { overflow-x: auto; scrollbar-width: none; }
.f-seg::-webkit-scrollbar { display: none; }
.f-seg-off:hover { color: var(--ink) !important; background: rgba(255, 255, 255, .6) !important; }
.v2-root[data-theme="dark"] .f-seg-off:hover { background: rgba(255, 255, 255, .06) !important; }
.f-input:hover { border-color: var(--ink) !important; }
.f-input:focus { border-color: var(--ws-accent) !important; box-shadow: 0 0 0 3px var(--ws-accent-soft); outline: none; }
.f-input::placeholder { color: var(--text-2); }
.f-more:hover { background: var(--bg) !important; }
.f-btn:disabled { cursor: not-allowed !important; }
.f-btn-accent:hover:not(:disabled) { background: var(--ws-accent-ink) !important; }
.f-btn-accent:active:not(:disabled) { transform: scale(.98); }
.f-bar { position: sticky; bottom: 16px; z-index: 5; }
.f-swatch:hover { transform: translateY(-1px); color: var(--ink) !important; }
/* Панель настроек: кнопка «Собрать» прилипает к низу окна, пока панель на экране */
.f-panel-action { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -8px 16px -12px rgba(31,27,58,.25); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
/* Узкая правая панель (от 1100 px): кнопка во всю ширину панели, строка о списании под ней. Шире — кнопка обычной ширины слева */
@media (min-width: 1100px) { .f-panel-action { display: grid; justify-items: center; text-align: center; } .f-panel-action .f-btn { width: 100%; } }
@media (max-width: 1099px) { .f-panel { order: -1; } }
@media (min-width: 1100px) { .f-doc-layout { grid-template-columns: minmax(0, 1fr) 320px; } }
.f-opt-on:hover { border-color: var(--ws-accent-ink) !important; }
/* Узкие экраны: меню прячется за кнопку в верхней панели, поля встают в колонку */
.f-topbar { display: none; }
@media (max-width: 1023px) { .f-side { display: none; } .f-topbar { display: flex; } }
@media (max-width: 479px) { .f-row-sg { grid-template-columns: minmax(0, 1fr); } }
/* А2: карточки «Дополнить урок» */
.f-rec:hover { border-color: var(--ws-accent) !important; }
.f-rec-on:hover { border-color: var(--ws-accent-ink) !important; }

/* А2: ниже 1200 px одна колонка — форма, «Дополнить урок», превью, кнопка последней и липкая к низу окна */
@media (max-width: 1199px) {
  .f-a2-main, .f-a2-side, .f-a2-side > sc-if { display: contents !important; }
  .f-a2-form { order: 1; } .f-a2-recs { order: 2; } .f-a2-prev { order: 3; } .f-a2-main > .f-bar { order: 4; }
}
/* А2: ниже 1440 px вкладки форматов без значков — все 8 помещаются в один ряд от 1280 px */
@media (max-width: 1439px) { .f-a2-tab-ic { display: none !important; } .f-a2-tab { padding: 0 12px !important; } }
/* А2: описание документа в «Дополнить урок» — только когда карточка широкая (список в одну колонку) */
@container (max-width: 279px) { .f-a2-rec-desc { display: none; } }

/* ===== А2 — современный вид (03.11, отзыв владельца + второе мнение Gemini) =====
   Только для артборда А2: корень .f-a2-root, страница .f-a2. Инлайн-стили генератора перекрываются через !important. */
.f-a2-root { --ease-snappy: cubic-bezier(.2, .8, .2, 1); --a2-card-shadow: 0 1px 2px rgba(31, 27, 58, .04), 0 14px 36px -18px rgba(60, 40, 120, .22); }
/* Фон: мягкое свечение сверху (индиго слева, тёплый персик справа) растворяется в светлом фоне */
.f-a2-root:not([data-theme="dark"]) { background:
  radial-gradient(1000px 460px at 12% -12%, rgba(124, 104, 238, .17), transparent 70%),
  radial-gradient(820px 420px at 96% -10%, rgba(255, 172, 128, .16), transparent 70%),
  linear-gradient(180deg, #f3f1fb 0, var(--bg) 560px) !important; }
.f-a2-root[data-theme="dark"] { background:
  radial-gradient(1000px 460px at 12% -12%, rgba(139, 120, 255, .16), transparent 70%),
  radial-gradient(820px 420px at 96% -10%, rgba(255, 150, 110, .08), transparent 70%),
  var(--bg) !important; }
/* Воздух: сетка 8 px */
.f-a2 { gap: 28px !important; padding-top: 32px !important; padding-bottom: 64px !important; }
.f-a2 .f-layout { gap: 28px; }
@media (min-width: 1600px) { .f-a2 .f-layout { gap: 40px; } }
.f-a2 .f-a2-form { padding: 28px !important; gap: 28px !important; }
.f-a2 .f-a2-form [style*="border-top: 1px solid var(--line)"] { border-top: 0 !important; padding-top: 0 !important; }
.f-a2 .f-a2-recs, .f-a2 .f-a2-prev { padding: 24px !important; }
/* Карточки: белые, тонкая граница и мягкая тень вместо плоского фона */
.f-a2 .f-a2-form, .f-a2 .f-a2-recs, .f-a2 .f-a2-prev { box-shadow: var(--a2-card-shadow) !important; border: 1px solid rgba(31, 27, 58, .06); }
.f-a2-root[data-theme="dark"] .f-a2-form, .f-a2-root[data-theme="dark"] .f-a2-recs, .f-a2-root[data-theme="dark"] .f-a2-prev { border-color: rgba(239, 236, 251, .08); box-shadow: 0 14px 36px -18px rgba(0, 0, 0, .6) !important; }
/* Общие переходы — быстрые, без «пружин» */
.f-a2 button, .f-a2 a, .f-a2 .f-input { transition: background-color .15s var(--ease-snappy), border-color .15s var(--ease-snappy), box-shadow .15s var(--ease-snappy), color .15s var(--ease-snappy), transform .15s var(--ease-snappy), opacity .15s; }
/* Форматы — одна «рельса» вместо восьми отдельных рамок */
.f-a2 .f-a2-rail { width: fit-content; max-width: 100%; gap: 2px !important; padding: 5px; border-radius: 16px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(31, 27, 58, .09); box-shadow: 0 1px 2px rgba(31, 27, 58, .05); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.f-a2-root[data-theme="dark"] .f-a2-rail { background: rgba(255, 255, 255, .04); border-color: rgba(239, 236, 251, .1); }
.f-a2 .f-a2-tab { border: 0 !important; background: transparent !important; border-radius: 11px !important; color: var(--text-2) !important; }
.f-a2 .f-a2-tab:hover { background: rgba(31, 27, 58, .05) !important; color: var(--ink) !important; }
.f-a2 .f-a2-tab.f-chip-on, .f-a2 .f-a2-tab.f-chip-on:hover { background: var(--surface) !important; color: var(--ink) !important; box-shadow: 0 1px 2px rgba(31, 27, 58, .08), 0 4px 12px -4px rgba(60, 40, 120, .22), inset 0 0 0 1px var(--ws-accent-border) !important; }
/* Классы — та же рельса */
.f-a2 .f-a2-grades { width: fit-content; max-width: 100%; gap: 2px !important; padding: 4px; border-radius: 14px; background: var(--surface-2); }
.f-a2 .f-a2-grades button { width: 38px !important; height: 38px !important; border: 0 !important; background: transparent !important; border-radius: 10px !important; color: var(--text-2) !important; }
.f-a2 .f-a2-grades button:hover:not([aria-disabled="true"]) { background: rgba(255, 255, 255, .7) !important; color: var(--ink) !important; }
.f-a2 .f-a2-grades button.f-chip-on { background: var(--surface) !important; color: var(--ws-accent-ink) !important; font-weight: 700 !important; box-shadow: 0 1px 2px rgba(31, 27, 58, .1), 0 3px 8px -3px rgba(60, 40, 120, .3), inset 0 0 0 1px var(--ws-accent-border) !important; }
.f-a2-root[data-theme="dark"] .f-a2-grades button:hover:not([aria-disabled="true"]) { background: rgba(255, 255, 255, .06) !important; }
/* Переключатели: выбранный сегмент «поднят» */
.f-a2 .f-seg-on { box-shadow: 0 1px 2px rgba(31, 27, 58, .1), 0 3px 8px -3px rgba(60, 40, 120, .28) !important; }
/* Поля: выше и спокойнее, фокус — мягкое кольцо */
.f-a2 input.f-input, .f-a2 select.f-input { height: 48px !important; }
.f-a2 #topic { font-size: 17px; }
.f-a2 .f-input:focus { box-shadow: 0 0 0 4px var(--ws-accent-soft) !important; }
/* Галочки — рисуются за 200 мс */
@keyframes f-a2-check { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.f-a2 [aria-checked="true"] svg path { stroke-dasharray: 24; animation: f-a2-check .2s var(--ease-snappy) both; }
/* «Что добавить» и «Дополнить урок»: подъём при наведении */
.f-a2 [role="checkbox"]:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -6px rgba(60, 40, 120, .3); }
.f-a2 .f-rec-on { background: rgba(75, 64, 184, .045) !important; }
.f-a2 .f-rec:hover { border-color: var(--ink) !important; }
/* Главная кнопка: глубина, «подъём» и стрелка при наведении, нажатие */
.f-a2-root:not([data-theme="dark"]) .f-a2 .ws-btn-primary { background: linear-gradient(180deg, #2f2a57 0%, #1f1b3a 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(31, 27, 58, .2), 0 8px 20px -8px rgba(31, 27, 58, .55); }
.f-a2-root:not([data-theme="dark"]) .f-a2 .ws-btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, #3b3482 0%, #2a2462 100%) !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(31, 27, 58, .2), 0 14px 28px -10px rgba(42, 36, 98, .6); }
.f-a2 .ws-btn-primary:active:not(:disabled) { transform: translateY(0) scale(.98) !important; }
.f-a2 .f-btn svg { transition: transform .15s var(--ease-snappy); }
.f-a2 .f-btn:hover:not(:disabled) svg { transform: translateX(3px); }
/* Липкая полоса — «стекло» */
.f-a2 .f-bar { background: rgba(255, 255, 255, .8) !important; -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-color: rgba(31, 27, 58, .08) !important; border-radius: 18px !important; box-shadow: 0 1px 2px rgba(31, 27, 58, .05), 0 16px 40px -16px rgba(31, 27, 58, .35) !important; }
.f-a2-root[data-theme="dark"] .f-bar { background: rgba(28, 24, 52, .78) !important; border-color: rgba(239, 236, 251, .1) !important; }
/* Появление блоков при смене формата и документа: подъём на 4 px и проявление за 220 мс */
@keyframes f-a2-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.f-a2 .f-a2-in { animation: f-a2-in .22s var(--ease-snappy) both; }
/* Окно сборки: полоса прогресса с бегущим бликом */
@keyframes f-a2-sheen { from { transform: translateX(-100%); } to { transform: translateX(200%); } }
.f-a2-root [role="dialog"] [style*="background: var(--ws-bar-active)"] { position: relative; overflow: hidden; background: linear-gradient(90deg, #4b40b8, #7c68ee) !important; }
.f-a2-root [role="dialog"] [style*="background: var(--ws-bar-active)"]::after { content: ""; position: absolute; inset: 0; width: 50%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); animation: f-a2-sheen 1.4s ease-in-out infinite; }
/* Превью на телефоне — под кнопкой «Как будет выглядеть» */
.f-a2 .f-a2-pvtoggle { display: none; }
/* Телефон */
@media (max-width: 639px) {
  .f-a2 { gap: 20px !important; padding-top: 20px !important; }
  .f-a2 h1 { font-size: 24px !important; line-height: 32px !important; }
  .f-a2 .f-a2-rail { width: 100%; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .f-a2 .f-a2-rail::-webkit-scrollbar { display: none; }
  .f-a2 .f-a2-tab { flex: 0 0 auto; }
  .f-a2 .f-a2-form { padding: 20px !important; gap: 24px !important; }
  .f-a2 .f-a2-recs, .f-a2 .f-a2-prev { padding: 20px !important; }
  .f-a2 .f-a2-grades button { width: 34px !important; height: 36px !important; }
  .f-a2 .f-a2-pvtoggle { display: inline-flex; }
  .f-a2 .f-a2-stack:not(.is-open) { display: none; }
  .f-a2 .f-a2-prev:has(.f-a2-stack:not(.is-open)) [aria-label="Документы комплекта"] { display: none !important; }
  .f-a2 .f-bar .f-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .f-a2 .f-a2-in, .f-a2 [aria-checked="true"] svg path, .f-a2-root [role="dialog"] *::after { animation: none !important; } .f-a2 button, .f-a2 a { transition: none !important; } }
/* А2: в узкой карточке «Дополнить урок» (две колонки до 1600 px) миниатюра прячется — название не упирается в галочку */
@container (max-width: 199px) { .f-a2-rec-thumb { display: none !important; } }
/* Меню: длинные названия обрезаются многоточием, дата справа остаётся видна */
.sb-item { min-width: 0; max-width: 100%; overflow: hidden; }