/* «Сдам!» — стили платформы. Адаптив: mobile-first, приятный современный вид. */
:root {
  --accent: #3b6ef5;
  --accent-2: #6a5cff;
  --accent-dark: #274fc4;
  --accent-light: #eaf0ff;
  --green: #16a765;
  --green-light: #e4f7ee;
  --red: #e0464b;
  --red-light: #fdece; /* fallback */
  --red-light: #fdecec;
  --orange: #e28a00;
  --orange-light: #fdf3e0;
  --bg: #f4f6fc;
  --card: #ffffff;
  --text: #171d2e;
  --muted: #69728a;
  --border: #e6eaf3;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 2px 8px rgba(23,29,46,.05);
  --shadow-lg: 0 12px 30px rgba(23,29,46,.10);
  --grad: linear-gradient(135deg, #3b6ef5 0%, #6a5cff 100%);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.55rem; margin: 22px 0 14px; letter-spacing: -.01em; }
h2 { font-size: 1.25rem; margin: 26px 0 12px; letter-spacing: -.01em; }
h3 { font-size: 1.06rem; margin: 18px 0 8px; }
@media (min-width: 720px) { h1 { font-size: 1.9rem; } h2 { font-size: 1.4rem; } }
.muted { color: var(--muted); font-size: .92rem; }
img { max-width: 100%; height: auto; }

/* Шапка */
.topbar { background: rgba(255,255,255,.9); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; }
.topbar-in { display: flex; align-items: center; gap: 10px; padding: 10px 16px; max-width: 1000px; margin: 0 auto; }
.logo { font-weight: 800; font-size: 1.3rem; color: var(--text); display: flex; align-items: center; gap: 7px; }
.logo:hover { text-decoration: none; }
.logo .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--grad); display: inline-block; }
.nav { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin-left: auto; font-size: .95rem; }
.nav a { color: var(--text); padding: 7px 11px; border-radius: 9px; transition: background .15s; }
.nav a:hover { background: var(--accent-light); text-decoration: none; }
.nav-user { color: var(--muted); padding: 7px 4px; font-size: .9rem; }
/* мобильное меню (CSS-only, чекбокс) */
.nav-toggle { display: none; }
.burger { display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--border);
  border-radius: 10px; background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.burger span, .burger span::before, .burger span::after { content: ""; display: block; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px; position: relative; }
.burger span::before { position: absolute; top: -6px; }
.burger span::after { position: absolute; top: 6px; }
@media (max-width: 719px) {
  .burger { display: inline-flex; }
  .nav { position: fixed; inset: 56px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg);
    padding: 8px 12px 14px; margin: 0; transform: translateY(-120%); transition: transform .22s ease; }
  .nav a, .nav-user { padding: 12px 10px; border-radius: 10px; width: 100%; }
  .nav a + a { border-top: 1px solid var(--border); }
  .nav-toggle:checked ~ .nav { transform: translateY(0); }
  .nav .btn { text-align: center; margin-top: 6px; }
}

/* Кнопки */
.btn {
  display: inline-block; background: var(--grad); color: #fff !important;
  border: 0; border-radius: 12px; padding: 11px 20px;
  font-size: 1rem; font-weight: 600; cursor: pointer; text-align: center;
  box-shadow: 0 4px 12px rgba(59,110,245,.28); transition: transform .12s, box-shadow .12s, filter .12s;
}
.btn:hover { filter: brightness(1.05); text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(59,110,245,.34); }
.btn:active { transform: translateY(0); }
.btn-sm { padding: 7px 14px; font-size: .9rem; border-radius: 10px; box-shadow: none; }
.btn-outline { background: #fff; color: var(--accent) !important; border: 1.5px solid var(--accent); box-shadow: none; }
.btn-outline:hover { background: var(--accent-light); filter: none; }
.btn-green { background: linear-gradient(135deg,#18b56e,#12a05f); box-shadow: 0 4px 12px rgba(22,167,101,.28); }
.btn-danger { background: linear-gradient(135deg,#ef5a5f,#d33a40); box-shadow: 0 4px 12px rgba(224,70,75,.25); }
.btn-block { display: block; width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: none; }

/* Карточки */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; margin: 16px 0; box-shadow: var(--shadow); }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* Формы */
label { display: block; font-weight: 600; margin: 14px 0 5px; font-size: .95rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], textarea, select {
  width: 100%; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 10px;
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--text); transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
textarea { min-height: 120px; resize: vertical; }
form .btn { margin-top: 16px; }

/* Флеш-сообщения */
.flash { border-radius: var(--radius-sm); padding: 13px 16px; margin: 14px 0; font-weight: 500; }
.flash-success { background: var(--green-light); color: #0f6b45; border: 1px solid #bce8d3; }
.flash-error { background: var(--red-light); color: #a3282d; border: 1px solid #f4c4c4; }
.flash-info { background: var(--accent-light); color: #2a4bb0; border: 1px solid #cdd9fb; }

/* Бейджи */
.badge { display: inline-block; border-radius: 999px; padding: 3px 11px; font-size: .78rem; font-weight: 700; vertical-align: middle; }
.badge-free { background: var(--green-light); color: var(--green); }
.badge-exam { background: var(--accent-light); color: var(--accent); }
.badge-new { background: var(--red-light); color: var(--red); }
.badge-progress { background: var(--orange-light); color: var(--orange); }
.badge-closed { background: #eef1f6; color: var(--muted); }
.badge-lock { background: #eef1f6; color: var(--muted); }
.badge-ok { background: var(--green-light); color: var(--green); }
.badge-bad { background: var(--red-light); color: var(--red); }
.badge-pending { background: var(--orange-light); color: var(--orange); }

/* Таблицы */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; background: var(--card); font-size: .94rem; min-width: 480px; }
table.tbl th, table.tbl td { padding: 11px 13px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.tbl th { background: #eff2fa; font-size: .82rem; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); position: sticky; top: 0; }
table.tbl tr:last-child td { border-bottom: 0; }

/* Уроки и модули */
.module { margin: 18px 0; }
.module-title { font-weight: 700; margin-bottom: 8px; font-size: 1.02rem; }
.lesson-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 15px; margin: 8px 0; box-shadow: var(--shadow); transition: box-shadow .15s;
}
.lesson-row:hover { box-shadow: var(--shadow-lg); }
.lesson-row .grow { flex: 1; min-width: 160px; }

/* Теория урока */
.theory { font-size: 1.02rem; }
.theory img { max-width: 100%; height: auto; border-radius: 10px; }
.theory table { border-collapse: collapse; width: 100%; }
.theory table td, .theory table th { border: 1px solid var(--border); padding: 7px 11px; }
.theory blockquote { border-left: 4px solid var(--accent); margin: 14px 0; padding: 8px 16px; background: var(--accent-light); border-radius: 0 10px 10px 0; }
.theory pre { background: #171d2e; color: #dbe6ff; padding: 14px 16px; border-radius: 10px; overflow-x: auto; font-size: .9rem; line-height: 1.55; }
.theory code { background: #eef1f6; color: var(--accent-dark); padding: 1px 6px; border-radius: 5px; font-size: .92em; }
.theory pre code { background: none; color: inherit; padding: 0; }

/* Видео */
.video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; margin: 6px 0; }
.video-wrap iframe, .video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Оценка урока (звёзды) — слева 1, справа 5 */
.rate-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rate-hint { color: var(--muted); font-size: .9rem; font-weight: 700; }
.rate { display: inline-flex; flex-direction: row-reverse; gap: 6px; }
.rate input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.rate label { font-size: 2rem; color: #d7ddea; cursor: pointer; margin: 0; line-height: 1; transition: color .12s, transform .1s; }
.rate label:hover { transform: scale(1.15); }
.rate label:hover, .rate label:hover ~ label, .rate input:checked ~ label { color: #f5b301; }
.rate-static { color: #f5b301; font-size: 1.15rem; letter-spacing: 2px; }

/* Задания */
.task { border-left: 4px solid var(--accent); }
.task .options label { font-weight: 400; margin: 8px 0; display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.task .options input { width: auto; margin-top: 5px; }
.task-result { border-radius: 10px; padding: 11px 15px; margin-top: 12px; }
.task-result.ok { background: var(--green-light); color: #0f6b45; }
.task-result.bad { background: var(--red-light); color: #a3282d; }
.task-result.pending { background: var(--orange-light); color: #855200; }

/* Лендинг */
.hero { text-align: center; padding: 54px 12px 34px; }
.hero h1 { font-size: 2rem; margin-bottom: 12px; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (min-width: 720px) { .hero h1 { font-size: 2.7rem; } }
.hero p { font-size: 1.12rem; color: var(--muted); max-width: 600px; margin: 0 auto 24px; }
.price { font-size: 1.35rem; font-weight: 800; color: var(--text); }

/* Прогресс */
.progress { background: #e8ecf6; border-radius: 999px; height: 10px; overflow: hidden; }
.progress > div { background: var(--grad); height: 100%; border-radius: 999px; transition: width .4s; }

/* KPI */
.kpi { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }

.footer { border-top: 1px solid var(--border); margin-top: 48px; padding: 26px 0 34px; color: var(--muted); font-size: .9rem; background: var(--card); }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mt0 { margin-top: 0; } .mb0 { margin-bottom: 0; }
details > summary { cursor: pointer; }

/* Аватарки */
.avatar { border-radius: 50%; object-fit: cover; vertical-align: middle; flex: 0 0 auto; }
.avatar-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--grad); color: #fff; font-weight: 700; line-height: 1; }
.nav-user { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; }
.nav-user:hover { background: var(--accent-light); text-decoration: none; }

/* SEO-лендинг: преимущества и текстовые блоки */
.seo-block { margin: 30px 0; }
.seo-block h2 { margin-bottom: 10px; }
.feature-ico { font-size: 1.6rem; }

/* Статус «в сети» */
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.online-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.online-dot.off { background: #cbd3e1; }
.online-now { color: #15924b; font-weight: 600; }
.attach-badge { display: inline-block; font-size: .78rem; padding: 2px 8px; border-radius: 999px; }
.attach-mine { background: var(--green-light); color: #0f6b45; }
.attach-other { background: var(--orange-light); color: #855200; }
.attach-none { background: #eef1f6; color: var(--muted); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.filters label { font-weight: 600; font-size: .85rem; display: block; margin-bottom: 3px; }
.filters select, .filters input { min-width: 150px; }

/* Календарь занятий (неделя по часам) */
.cal-grid { width: 100%; border-collapse: collapse; font-size: .86rem; }
.cal-grid th, .cal-grid td { border: 1px solid var(--border); vertical-align: top; }
.cal-grid thead th { background: var(--card); padding: 8px 6px; text-align: center; position: sticky; top: 0; }
.cal-grid th.cal-hour-h { width: 54px; }
.cal-hour { width: 54px; text-align: right; padding: 6px 8px; color: var(--muted); white-space: nowrap; background: var(--card); }
.cal-cell { min-width: 92px; height: 46px; padding: 3px; }
.cal-grid .cal-today { background: rgba(59,110,245,.06); }
.cal-ev { background: var(--grad); color: #fff; border-radius: 8px; padding: 5px 7px; margin-bottom: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.cal-ev-time { font-weight: 700; font-size: .8rem; }
.cal-ev-name { font-weight: 600; }
.cal-ev-owner, .cal-ev-topic, .cal-ev-note { color: rgba(255,255,255,.85) !important; font-size: .78rem; }
.cal-ev-link { display: inline-block; margin-top: 2px; color: #fff !important; text-decoration: underline; font-size: .8rem; }
.cal-ev-actions { margin-top: 4px; display: flex; gap: 8px; }
.cal-ev-actions a, .cal-ev-actions button { color: #fff; background: rgba(255,255,255,.18); border: none; border-radius: 6px; padding: 1px 7px; font-size: .8rem; cursor: pointer; text-decoration: none; }
.cal-ev-actions a:hover, .cal-ev-actions button:hover { background: rgba(255,255,255,.32); }
@media (max-width: 640px) {
  .cal-grid { font-size: .74rem; }
  .cal-cell { min-width: 64px; }
  .cal-hour, .cal-grid th.cal-hour-h { width: 40px; }
}

/* Конструктор заданий и ответы */
.task .options label { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 6px 0; }
.task .options label:hover { background: var(--accent-light); }
.theory img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
.badge-ok { background: var(--green-light); color: #0f6b45; }

/* Группы людей */
.group-chip { display: inline-block; font-size: .82rem; padding: 4px 10px; border-radius: 999px; background: var(--accent-light); color: var(--accent); text-decoration: none; border: 1px solid #cdd9fb; }
a.group-chip:hover { background: #dbe6ff; text-decoration: none; }
.group-chip-on { background: var(--grad); color: #fff; border-color: transparent; }

/* Перетаскивание модулей и уроков */
.drag-handle { cursor: grab; color: var(--muted); font-size: 1.15rem; line-height: 1; padding: 0 6px; user-select: none; flex: 0 0 auto; touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.sort-item.dragging { opacity: .5; outline: 2px dashed var(--accent); outline-offset: 2px; }
.lessons-list { min-height: 6px; }
.lessons-list:empty::after { content: "Уроков пока нет"; color: var(--muted); font-size: .85rem; display: block; padding: 4px 0; }
#modulesList.sortable > .sort-item { cursor: default; }
.save-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: #0f6b45; color: #fff; padding: 10px 18px; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.18); opacity: 0; pointer-events: none; transition: all .25s; z-index: 60; font-size: .9rem; }
.save-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.save-toast.err { background: #a3282d; }

/* Геймификация */
.gamebar { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.game-stat { text-align: center; min-width: 84px; }
.game-stat .kpi { font-size: 1.5rem; }
.game-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.badge-chip { background: var(--accent-light); color: var(--accent); border: 1px solid #cdd9fb; border-radius: 999px; padding: 5px 12px; font-size: .85rem; white-space: nowrap; }

/* ===== Визуальный редактор (rich text) ===== */
.rich-editor{border:1px solid var(--border,#d7deea);border-radius:10px;overflow:hidden;background:#fff;margin:4px 0 2px}
.rich-toolbar{display:flex;flex-wrap:wrap;gap:2px;align-items:center;padding:6px;background:#f3f6fb;border-bottom:1px solid var(--border,#d7deea)}
.rich-btn{border:1px solid transparent;background:transparent;border-radius:6px;padding:5px 9px;font-size:.9rem;line-height:1;color:#26324a;cursor:pointer;min-width:32px}
.rich-btn:hover{background:#e5ecf9;border-color:#cdd8ec}
.rich-btn:active{background:#d5e0f5}
.rich-sep{width:1px;height:20px;background:#cfd8e8;margin:0 4px}
.rich-area{min-height:150px;padding:12px 14px;outline:none;line-height:1.5;font-size:1rem;color:#1f2a3d}
.rich-area:focus{box-shadow:inset 0 0 0 2px rgba(47,111,237,.12)}
.rich-area h3{margin:.6em 0 .3em;font-size:1.1rem}
.rich-area p{margin:.4em 0}
.rich-area ul,.rich-area ol{margin:.4em 0 .4em 1.4em}
.rich-area blockquote{margin:.5em 0;padding:.3em .8em;border-left:3px solid var(--accent,#2f6fed);color:#516079;background:#f5f8ff}
.rich-area img{max-width:100%;height:auto;border-radius:6px}
.rich-area:empty:before{content:attr(data-placeholder);color:#9aa6bc}
.rich-status{padding:0 12px 8px;font-size:.85rem;min-height:1px}

/* ===== База знаний ===== */
.kb-wrap{display:grid;grid-template-columns:220px 1fr;gap:18px;align-items:start;margin-top:12px}
.kb-toc{position:sticky;top:12px;padding:14px}
.kb-toc-title{font-weight:700;margin-bottom:8px;color:#16233d}
.kb-toc nav{display:flex;flex-direction:column;gap:2px}
.kb-toc a{padding:6px 8px;border-radius:6px;color:#33415c;text-decoration:none;font-size:.95rem}
.kb-toc a:hover{background:#eef3fb;color:#2f6fed}
.kb-section{scroll-margin-top:14px}
.kb-section h2{font-size:1.25rem}
.kb-section ul{margin:.4em 0 .4em 1.2em}
.kb-section li{margin:.3em 0}
@media(max-width:760px){.kb-wrap{grid-template-columns:1fr}.kb-toc{position:static}}

/* ===== Приватная заметка преподавателя к заданию (не видна ученику) ===== */
.teacher-note{background:#fff8e8;border:1px solid #ffe2a6;border-left:3px solid #eaa522;border-radius:8px;padding:10px 12px;font-size:.95rem;color:#5c4b1f;line-height:1.5}
.teacher-note b{color:#8a6410}

/* ===== Новые типы заданий (пропуски, пары, порядок, число) ===== */
.gaps-text{line-height:2.1;font-size:1rem}
.gap-input{display:inline-block;width:9em;min-width:80px;margin:0 3px;padding:2px 6px;border:none;border-bottom:2px solid var(--accent);border-radius:0;background:#f5f8ff;font:inherit;text-align:center}
.gap-input:focus{outline:none;background:#eaf1ff;border-bottom-color:#1c4fd6}
.match-grid{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.match-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center}
.match-left{padding:8px 12px;background:var(--accent-light);border-radius:8px;font-weight:600;color:#16233d}
.match-row select{margin:0}
.order-list{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.order-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:#fff}
.order-num{width:64px;flex:none;margin:0;text-align:center}
.order-label{flex:1}
@media(max-width:560px){.match-row{grid-template-columns:1fr;gap:4px}}