/* Студия преподавателя. Опирается на переменные и классы academy.css
 * (ac-*); здесь только раскладка студии с префиксом st-. */

.st-head {
    display: flex; flex-wrap: wrap; gap: 16px 24px;
    align-items: flex-start; justify-content: space-between;
    margin: 0 0 20px;
}
.st-head .ac-lead { margin-bottom: 0; }
.st-head .ac-btn .ac-badge { margin-left: 4px; }

.st-panel {
    background: var(--ac-card); border: 1px solid var(--ac-line); border-radius: 20px;
    padding: 24px; box-shadow: var(--ac-shadow);
}

/* ── Карточки курсов ─────────────────────────────────────────── */
.st-course-grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.st-course-card {
    display: flex; flex-direction: column;
    background: var(--ac-card); border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius); overflow: hidden; box-shadow: var(--ac-shadow);
}
.st-cover { height: 96px; }
.st-course-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.st-course-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.st-course-body .ac-h3 { margin: 0; }
.st-stats {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    margin: 4px 0 0;
}
.st-stats div { background: var(--ac-soft); border-radius: 10px; padding: 8px 10px; }
.st-stats dt { font-size: .74rem; color: var(--ac-muted); font-weight: 600; }
.st-stats dd { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--ac-ink); }
.st-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: auto 0 0; padding-top: 8px; }

/* ── Формы ───────────────────────────────────────────────────── */
.st-form { display: grid; gap: 16px; }
.st-field { display: grid; gap: 6px; }
.st-field label { font-weight: 600; color: var(--ac-ink); }
.st-field input, .st-field textarea, .st-field select,
.st-reject textarea {
    width: 100%; font: inherit; color: var(--ac-ink);
    padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff;
}
.st-field input:focus-visible, .st-field textarea:focus-visible, .st-field select:focus-visible,
.st-reject textarea:focus-visible {
    outline: none; border-color: var(--ac-accent); box-shadow: var(--ac-focus);
}
.st-field.has-error input, .st-field.has-error textarea { border-color: var(--ac-bad); }
.st-error { margin: 0; color: var(--ac-bad); font-size: .88rem; }
.st-form .ac-btn { justify-self: start; }

/* ── Заявки ──────────────────────────────────────────────────── */
.st-apps td, .st-apps th { min-width: 140px; }
.st-comment { margin: 6px 0 0; font-size: .88rem; color: var(--ac-text); }
.st-decision { min-width: 220px; }
.st-decision .ac-message { margin-bottom: 8px; }
.st-decision-forms { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.st-decision-forms form { margin: 0; }
.st-reject summary { list-style: none; cursor: pointer; }
.st-reject summary::-webkit-details-marker { display: none; }
.st-reject[open] summary { margin-bottom: 8px; }
.st-reject form { display: grid; gap: 6px; min-width: 220px; }
.st-reject label { font-size: .85rem; font-weight: 600; color: var(--ac-ink); }
.st-btn-danger { background: var(--ac-bad); border-color: var(--ac-bad); }
.st-btn-danger:hover { background: #991b1b; border-color: #991b1b; }

/* ── Редактор курса ──────────────────────────────────────────── */
.st-section-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.st-section-head .ac-h2 { margin: 0; }
.st-card-link { color: inherit; text-decoration: none; }
.st-card-link:hover { color: var(--ac-accent); }
.st-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.st-tabs {
    display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px;
    border-bottom: 1px solid var(--ac-line);
}
.st-tabs a {
    padding: 10px 16px; border-radius: 10px 10px 0 0; color: var(--ac-text);
    font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.st-tabs a:hover { color: var(--ac-accent); background: var(--ac-accent-soft); }
.st-tabs a[aria-current="page"] { color: var(--ac-accent-dark); border-bottom-color: var(--ac-accent); }
.st-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.st-editor-side { position: sticky; top: 90px; }
.st-section { min-width: 0; }
.st-lead { margin: -8px 0 16px; max-width: 70ch; }
.st-gap { margin-top: 16px; }
.st-m0 { margin: 0; }
.st-label { font-weight: 600; color: var(--ac-ink); font-size: .9rem; }
.st-back { margin: 0 0 8px; }

/* Чек-лист */
.st-checklist { padding: 20px; }
.st-checks { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; font-size: .92rem; }
.st-checks > li { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; }
.st-checks > li > i { margin-top: 3px; }
.st-checks .is-ok > i { color: var(--ac-ok); }
.st-checks .is-bad > i { color: var(--ac-bad); }
.st-checks .is-bad { color: var(--ac-ink); }
.st-check-problems { margin: 6px 0 0; padding-left: 16px; font-size: .85rem; display: grid; gap: 4px; }
.st-publish { display: grid; gap: 10px; }
.st-publish form { margin: 0; display: grid; gap: 6px; }
.st-publish .ac-message { margin: 0; font-size: .9rem; }
.st-block { margin-top: 16px; border-top: 1px solid var(--ac-line); padding-top: 12px; }
.st-block summary { cursor: pointer; font-weight: 600; color: var(--ac-muted); font-size: .9rem; }
.st-block form { margin-top: 10px; }

/* Инструменты: ↑ ↓ ✎ 🗑 */
.st-tools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-left: auto; }
.st-tool-form { margin: 0; }
.st-tool {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ac-line);
    background: var(--ac-card); color: var(--ac-text); cursor: pointer; text-decoration: none;
}
.st-tool:hover { background: var(--ac-accent-soft); color: var(--ac-accent-dark); border-color: #ddd2ff; }
.st-tool:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.st-tool[disabled] { opacity: .35; cursor: default; background: var(--ac-card); color: var(--ac-muted); }
.st-tool.is-danger:hover { background: var(--ac-bad-soft); color: var(--ac-bad); border-color: #fecaca; }

/* Программа */
.st-modules, .st-lessons, .st-questions, .st-options, .st-people, .st-image-list { list-style: none; margin: 0; padding: 0; }
.st-modules { display: grid; gap: 16px; }
.st-module {
    background: var(--ac-card); border: 1px solid var(--ac-line); border-radius: var(--ac-radius);
    padding: 18px; box-shadow: var(--ac-shadow); scroll-margin-top: 90px;
}
.st-module.is-inactive, .st-question.is-inactive, tr.is-inactive { opacity: .7; }
.st-module.is-inactive { background: var(--ac-soft); box-shadow: none; }
.st-module-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.st-module-head .ac-h3 { margin: 0; flex: 1 1 240px; }
.st-module-head form.st-inline-form { flex: 1 1 100%; }
.st-num { display: inline-block; color: var(--ac-accent-dark); font-weight: 700; margin-right: 6px; }
.st-lessons { display: grid; gap: 8px; margin-bottom: 12px; }
.st-lesson {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    padding: 10px; border: 1px solid var(--ac-line); border-radius: 12px; background: #fff;
    scroll-margin-top: 90px;
}
.st-lesson.is-editing { display: block; border-color: var(--ac-accent); box-shadow: var(--ac-focus); }
.st-lesson > .ac-note { margin: 0; }
.st-thumb { width: 96px; height: 54px; border-radius: 8px; object-fit: cover; background: var(--ac-soft); flex: none; }
.st-thumb-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--ac-muted); font-size: 1.4rem; }
.st-lesson-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 200px; }
.st-lesson-body .ac-kind { align-self: flex-start; }
.st-lesson-title { font-weight: 600; color: var(--ac-ink); overflow-wrap: anywhere; }
.st-file { font-size: .85rem; overflow-wrap: anywhere; }
.st-add { margin: 4px 0 12px; }
.st-add summary { list-style: none; cursor: pointer; }
.st-add summary::-webkit-details-marker { display: none; }
.st-add[open] summary { margin-bottom: 12px; }
.st-add form { padding: 16px; border: 1px dashed #cbd5e1; border-radius: 12px; background: var(--ac-soft); }
.st-module-tests { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 10px; border-top: 1px solid var(--ac-line); }
.st-finals { margin-top: 16px; padding: 14px 18px; border: 1px solid var(--ac-line); border-radius: var(--ac-radius); background: var(--ac-card); }
.st-test-link {
    display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px;
    background: var(--ac-accent-soft); color: var(--ac-accent-dark); text-decoration: none; font-size: .9rem; font-weight: 600;
}
.st-test-link:hover { background: #e2d9ff; color: var(--ac-accent-dark); }
.st-add-module { margin-top: 20px; }
.st-add-module .ac-h3 { margin: 0; }
.st-yt { margin: 8px 0 0; display: flex; gap: 10px; align-items: center; }
.st-yt img { width: 160px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--ac-soft); }
.st-current-file { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: .9rem; }

/* Формы редактора */
.st-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.st-form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-inline-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.st-inline-form .st-field { flex: 1 1 260px; }
.st-check { grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
.st-check input { width: 20px; height: 20px; accent-color: var(--ac-accent); }
.st-check .ac-hint, .st-check .st-error { grid-column: 2; }
.st-radios { border: 0; padding: 0; margin: 0; }
.st-radios legend { font-weight: 600; color: var(--ac-ink); margin-bottom: 6px; padding: 0; }
.st-radio { display: flex; gap: 8px; align-items: center; margin: 4px 0; font-weight: 400; }
.st-radio input { width: 18px; height: 18px; accent-color: var(--ac-accent); }
.st-inline-check { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; font-size: .88rem; }
.st-field input[type="file"] { padding: 8px; background: var(--ac-soft); }
.st-field input[type="checkbox"], .st-field input[type="radio"] { width: auto; }
.st-field.has-error select { border-color: var(--ac-bad); }
.st-address { margin: 0; font-size: .92rem; }
.st-address code { background: var(--ac-soft); padding: 2px 6px; border-radius: 6px; }

/* Тесты и веса */
.st-tests-table caption { padding-bottom: 10px; }
.st-weight-cell input {
    width: 96px; font: inherit; text-align: right; padding: 6px 8px;
    border: 1px solid #cbd5e1; border-radius: 8px;
}
.st-weight-cell input:focus-visible { outline: none; border-color: var(--ac-accent); box-shadow: var(--ac-focus); }
.st-row-tools { white-space: nowrap; }
.st-row-tools > * { vertical-align: middle; }
tr[id^="test-"] { scroll-margin-top: 90px; }

/* Вопросы */
.st-test-settings { margin: 0 0 8px; padding: 14px 18px; }
.st-test-settings summary { cursor: pointer; font-weight: 600; color: var(--ac-ink); }
.st-test-settings form { margin-top: 12px; }
.st-questions { display: grid; gap: 12px; margin-bottom: 16px; }
.st-question {
    background: var(--ac-card); border: 1px solid var(--ac-line); border-radius: var(--ac-radius);
    padding: 16px 18px; box-shadow: var(--ac-shadow); scroll-margin-top: 90px;
}
.st-question.is-editing { border-color: var(--ac-accent); }
.st-question > .ac-note { margin: 0; }
.st-q-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.st-q-text { color: var(--ac-ink); margin-bottom: 10px; overflow-wrap: anywhere; }
.st-q-images, .st-image-list { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.st-q-images img, .st-image-list img, .st-option-image img, .st-option-body img {
    max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--ac-line); background: #fff;
}
.st-image-list li { display: grid; gap: 6px; justify-items: start; }
.st-options { display: grid; gap: 6px; }
.st-options li {
    display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px;
    border-radius: 10px; background: var(--ac-soft);
}
.st-options li.is-correct { background: var(--ac-ok-soft); }
.st-options .ac-letter, .st-correct .ac-letter {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 8px; background: #fff; border: 1px solid var(--ac-line);
    font-weight: 700; color: var(--ac-ink);
}
.st-option-body { flex: 1; display: grid; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.st-confirm-key { margin: 10px 0 0; }
.st-options-edit { border: 1px solid var(--ac-line); border-radius: 12px; padding: 14px; margin: 0; display: grid; gap: 10px; }
.st-options-edit legend { font-weight: 600; color: var(--ac-ink); padding: 0 6px; }
.st-option-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; align-items: start; padding-top: 10px; border-top: 1px dashed var(--ac-line); }
.st-option-row:first-of-type { border-top: 0; padding-top: 0; }
.st-correct { display: flex; gap: 8px; align-items: center; font-weight: 600; cursor: pointer; }
.st-correct input { width: 20px; height: 20px; accent-color: var(--ac-ok); }
.st-correct:has(input:checked) .ac-letter { background: var(--ac-ok); border-color: var(--ac-ok); color: #fff; }
.st-option-fields { display: grid; gap: 6px; }
.st-option-fields textarea {
    width: 100%; font: inherit; color: var(--ac-ink); padding: 8px 10px;
    border: 1px solid #cbd5e1; border-radius: 10px; background: #fff;
}
.st-option-fields textarea:focus-visible { outline: none; border-color: var(--ac-accent); box-shadow: var(--ac-focus); }
.st-option-image { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem; }
.st-option-image > label { font-weight: 600; color: var(--ac-muted); }

/* Команда и статистика */
.st-team { margin-top: 20px; display: grid; gap: 12px; }
.st-team .ac-h3 { margin: 0; }
.st-people { display: grid; gap: 8px; }
.st-people li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.st-people form { margin: 0; }
.st-stats-lg { margin: 0 0 16px; }
.st-stats-lg dd { font-size: 1.6rem; }

@media (max-width: 1024px) {
    .st-editor-grid { grid-template-columns: 1fr; }
    .st-editor-side { position: static; order: -1; }
}

@media (max-width: 640px) {
    .st-panel { padding: 18px; }
    .st-option-row { grid-template-columns: 1fr; }
    .st-tabs a { padding: 8px 10px; }
    .st-module, .st-question { padding: 14px; }
    .st-stats dd { font-size: 1rem; }
}

/* ── Импорт из Word и подсказки ИИ ───────────────────────────── */
.st-q-toolbar { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.st-q-toolbar .ac-h3 { margin: 0; }
.st-ai-panel {
    display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
    background: var(--ac-accent-soft); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
}
.st-ai-panel .ac-hint { flex: 1 1 260px; color: var(--ac-ink); }
.st-ai-panel form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.st-ai-working { font-size: .88rem; color: var(--ac-accent-dark); }
.st-ai-working.htmx-indicator { display: none; }
.htmx-request .st-ai-working.htmx-indicator, .st-ai-working.htmx-request { display: inline; }
.st-ai-note { margin: 8px 0 0; font-size: .88rem; color: var(--ac-text); background: var(--ac-warn-soft); border-radius: 10px; padding: 8px 10px; }

.st-divider { display: flex; align-items: center; gap: 12px; margin: 28px 0; color: var(--ac-muted); font-weight: 600; }
.st-divider::before, .st-divider::after { content: ""; flex: 1; height: 1px; background: var(--ac-line); }

.st-import-notes { margin-bottom: 14px; }
.st-import-notes summary { cursor: pointer; font-weight: 600; color: var(--ac-ink); }
.st-import-notes ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: .9rem; }

.st-import-table td { vertical-align: top; }
.st-import-table tr.is-skipped td { opacity: .6; }
.st-import-table tr.has-error td { background: var(--ac-bad-soft); }
.st-imp-take { white-space: nowrap; }
.st-imp-take input { width: 18px; height: 18px; vertical-align: middle; margin-right: 6px; }
.st-imp-question { min-width: 220px; max-width: 420px; overflow-wrap: anywhere; }
.st-imp-points input {
    width: 84px; font: inherit; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff;
}
.st-imp-points input:focus-visible { outline: none; border-color: var(--ac-accent); box-shadow: var(--ac-focus); }
.st-imp-options { min-width: 240px; }
.st-imp-options fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; }
.st-imp-option { border-radius: 10px; padding: 4px 6px; }
.st-imp-option.is-correct { background: var(--ac-ok-soft); }
.st-imp-option img, .st-imp-image img { max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--ac-line); background: #fff; }
.st-imp-image { display: grid; gap: 4px; margin-top: 8px; font-size: .88rem; }
.st-imp-image label { font-weight: 600; color: var(--ac-ink); }
.st-imp-nokey { color: var(--ac-muted); font-size: .9rem; }
.st-imp-warnings { margin: 8px 0 0; padding-left: 18px; font-size: .85rem; color: var(--ac-warn); }
.st-placeholder {
    margin: 0; padding: 8px 10px; border: 2px dashed #94a3b8; border-radius: 10px;
    background: var(--ac-soft); color: var(--ac-text); font-size: .88rem;
}

.st-imp-modules { margin: 12px 0 0; padding-left: 0; list-style: none; display: grid; gap: 16px; }
.st-imp-modules .ac-h3 { margin: 0 0 6px; }
.st-imp-lessons { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.st-imp-lessons li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.st-imp-test { list-style: none; margin-left: -20px; }
.st-imp-modules > .st-imp-test { margin-left: 0; }

@media (max-width: 760px) {
    .st-import-table thead { display: none; }
    .st-import-table, .st-import-table tbody, .st-import-table tr, .st-import-table td { display: block; width: 100%; }
    .st-import-table tr { border-bottom: 1px solid var(--ac-line); padding: 8px 0; }
    .st-import-table td { border-bottom: 0; padding: 6px 12px; max-width: none; min-width: 0; }
}

/* Заявка преподавателя в одно нажатие */
.st-quick-apply { display: grid; gap: 12px; justify-items: start; }
.st-quick-more { width: 100%; }
.st-quick-more summary { cursor: pointer; color: var(--ac-accent); font-weight: 600; }
.st-quick-more textarea { width: 100%; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--ac-line);
    border-radius: 12px; font: inherit; }
.ac-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Поиск людей и список преподавателей */
.st-people-search { margin: 12px 0 16px; }
.st-people th { font-weight: 600; }
.st-people td .ac-badge { margin: 0 6px 4px 0; }
.st-person-action { text-align: right; white-space: nowrap; }
.st-person-action form { display: inline; }
.st-people { width: 100%; }

/* ── Подсказки для преподавателей ────────────────────────────── */
.st-help-line { margin: -8px 0 18px; }
.st-tabs a { display: grid; gap: 1px; }
.st-tab-hint { font-size: .74rem; font-weight: 500; color: var(--ac-muted); }
.st-tabs a[aria-current="page"] .st-tab-hint { color: var(--ac-accent-dark); }
.st-checklist-lead { margin: -2px 0 12px; }

/* «Курс за 4 шага» и пустой список */
.st-steps-panel { margin-bottom: 28px; }
.st-steps {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.st-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start;
    background: var(--ac-soft); border-radius: 14px; padding: 12px; }
.st-steps strong { display: block; color: var(--ac-ink); }
.st-steps span:not(.st-step-num) { display: block; font-size: .88rem; color: var(--ac-text); margin-top: 2px; }
.st-step-num {
    display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--ac-accent); color: #fff; font-weight: 700;
}
.st-steps-foot { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.st-steps-foot .st-samples-inline { margin: 0; }
.st-empty {
    display: grid; justify-items: center; gap: 8px; text-align: center;
    border: 2px dashed var(--ac-line); border-radius: 20px; padding: 32px 20px; background: var(--ac-card);
}
.st-empty > i { font-size: 2rem; color: var(--ac-accent); }
.st-empty .ac-text { margin: 0 0 6px; }

/* Заявитель: что будет дальше */
.st-next { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ac-line); }
.st-next-list { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; }

/* Новый курс: два способа */
.st-ways { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-way {
    display: grid; gap: 6px; height: 100%; padding: 18px; border-radius: 18px; text-decoration: none;
    background: var(--ac-card); border: 1px solid var(--ac-line); box-shadow: var(--ac-shadow); color: var(--ac-text);
}
.st-ways li:first-child .st-way { border-color: var(--ac-accent); }
.st-way:hover { border-color: var(--ac-accent); background: var(--ac-accent-soft); }
.st-way:focus-visible { outline: none; box-shadow: var(--ac-focus); }
.st-way strong { font-size: 1.1rem; color: var(--ac-ink); }
.st-way-kicker { margin: 0; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ac-muted); }
.st-way-kicker .ac-badge { text-transform: none; letter-spacing: 0; }
.st-way-go { color: var(--ac-accent); font-weight: 600; margin-top: 4px; }

/* Как оформить Word */
.st-fmt-box { background: var(--ac-soft); border-radius: 16px; padding: 16px 18px; }
.st-fmt-box .ac-h3 i { color: var(--ac-accent); }
.st-fmt-lead { margin: 0 0 10px; }
.st-fmt { margin: 0 0 10px; display: grid; gap: 6px; }
.st-fmt > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: start;
    background: var(--ac-card); border-radius: 10px; padding: 8px 12px; }
.st-fmt dt code {
    font-family: 'Times New Roman', Georgia, serif; font-size: 1.02rem; color: var(--ac-ink); white-space: normal;
    overflow-wrap: anywhere;
}
.st-fmt dd { margin: 0; font-size: .9rem; color: var(--ac-text); }
.st-samples { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.st-samples-inline { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin: -4px 0 0; font-size: .92rem; }
.st-samples-inline > i { color: var(--ac-accent); }

/* ── Страница «Как разместить курс» ──────────────────────────── */
.hp-page { font-size: 1.05rem; }
.hp-hero { margin-bottom: 20px; }
.hp-hero-actions, .hp-bottom { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; margin: 0; }
.hp-toc { margin-bottom: 20px; }
.hp-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp-toc a { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; color: var(--ac-ink); font-weight: 600; text-decoration: none; }
.hp-toc a:hover { background: var(--ac-accent-soft); color: var(--ac-accent-dark); }
.hp-toc-num {
    flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--ac-accent-soft); color: var(--ac-accent-dark); font-size: .9rem; font-weight: 700;
}
.hp-step { margin-bottom: 20px; scroll-margin-top: 90px; display: grid; gap: 12px; }
.hp-step-head { display: flex; gap: 14px; align-items: center; }
.hp-step-head .ac-h2 { margin: 0; }
.hp-step-icon {
    flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px;
    background: var(--ac-accent); color: #fff; font-size: 1.3rem;
}
.hp-step-n { margin: 0; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ac-accent-dark); }
.hp-text { margin: 0; line-height: 1.7; max-width: 70ch; color: var(--ac-text); }
.hp-list { margin: 0; padding-left: 24px; display: grid; gap: 8px; line-height: 1.6; max-width: 70ch; }
.hp-list li::marker { color: var(--ac-accent); font-weight: 700; }
.hp-sub { margin: 6px 0 0; }
.hp-note {
    display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: 12px;
    background: var(--ac-warn-soft); color: var(--ac-ink); line-height: 1.6;
}
.hp-note i { color: var(--ac-warn); margin-top: 5px; }
.hp-step-action { margin: 0; }
.hp-faq { display: grid; gap: 8px; }
.hp-faq details { border: 1px solid var(--ac-line); border-radius: 12px; padding: 12px 16px; background: var(--ac-card); }
.hp-faq summary { cursor: pointer; font-weight: 600; color: var(--ac-ink); }
.hp-faq details[open] summary { margin-bottom: 8px; }
.hp-bottom { justify-content: space-between; margin-top: 8px; }

@media (max-width: 900px) {
    .st-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .st-steps, .st-ways, .hp-toc ol { grid-template-columns: 1fr; }
    .st-fmt > div { grid-template-columns: 1fr; }
    .st-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-steps-foot .ac-btn, .hp-hero-actions .ac-btn { width: 100%; justify-content: center; }
    .hp-step-icon { width: 44px; height: 44px; font-size: 1.1rem; }
    .hp-page { font-size: 1rem; }
}

/* Образцы Word — крупные зелёные кнопки, чтобы их сразу было видно */
.st-samples { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; }
.st-samples-compact { padding: 14px 16px; border-radius: 14px; background: #ecfdf5; border: 1px solid #a7f3d0; }
.st-samples-title { flex: 1 1 100%; margin: 0; font-weight: 700; color: #065f46; }
.ac-btn.st-sample-btn { background: #059669; border-color: #059669; color: #fff; min-height: 48px;
    padding: 10px 18px; font-size: 1rem; }
.ac-btn.st-sample-btn:hover, .ac-btn.st-sample-btn:focus-visible { background: #047857; border-color: #047857; color: #fff; }

/* Удаление черновика: красная рамка и кнопки, чтобы не спутать с обычными действиями */
.st-danger { margin-top: 20px; border-color: #fecaca; background: #fffafa; }
.st-danger .ac-h3 { margin: 0 0 6px; color: var(--ac-bad); }
.st-danger .ac-hint { margin: 0 0 14px; }
.st-del-list { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 4px; }
.st-del-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.st-del-actions form { margin: 0; }
.ac-btn.st-btn-danger-ghost { color: var(--ac-bad); border-color: #fecaca; background: #fff; }
.ac-btn.st-btn-danger-ghost:hover { background: var(--ac-bad-soft); color: var(--ac-bad); border-color: #fca5a5; }

/* Карточка курса узкая: три ячейки в ряд рвали подписи посреди слова
   («Студент|ов», «Аяқтаған|дар») — здесь строки «подпись — число» */
.st-course-card .st-stats { grid-template-columns: 1fr; gap: 6px; }
.st-course-card .st-stats div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 6px 12px; }
.st-course-card .st-stats dt { font-size: .82rem; overflow-wrap: normal; }
.st-course-card .st-stats dd { font-size: 1rem; }