/* Тема: мягкий пастельный градиент, стеклянные карточки, кнопки-пилюли и курсив с засечками в заголовках */
/* Палитра «перламутр»: лавандово-голубая основа, персиковое и розовое свечение, тёмно-синий текст */
:root {
  --bg: #ebeafb; --card: #ffffff; --ink: #1c1b36; --muted: #66658a; --line: #e3e1f4;
  --brand: #6a5fc9; --brand-ink: #ffffff; --accent: #a8523a; --soft: #e5e2fa; --danger: #c23a4e;
  --peach: #fddccf; --mint: #d9f0ec; --sky: #d3dcfb; --rose: #f5d9ec; --mid: #8b7fe0;
  --radius: 18px; --shadow: 0 1px 2px rgba(80, 70, 160, .06), 0 14px 36px rgba(110, 95, 200, .12);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14132a; --card: #1f1e3b; --ink: #ecebff; --muted: #a9a8cc; --line: #33325e;
    --brand: #a99ff5; --brand-ink: #15142b; --accent: #f6bfa5; --soft: #2b2a52; --danger: #ff8a98;
    --peach: #3a2a3a; --mint: #1f3a3d; --sky: #25295a; --rose: #3a2640; --mid: #b8afff;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 36px rgba(0,0,0,.25);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg) radial-gradient(1000px 620px at 95% -120px, var(--rose), transparent 72%), radial-gradient(900px 560px at -5% -40px, var(--sky), transparent 72%), radial-gradient(1000px 600px at 60% 115%, var(--peach), transparent 74%) fixed no-repeat; color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }
main#app { padding: 24px 0 60px; min-width: 0; }
a { color: var(--brand); }
h1 { font-size: 2rem; font-weight: 650; letter-spacing: -.03em; line-height: 1.12; margin: .2em 0 .6em; }
h1 em, h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--mid); letter-spacing: -.01em; }
h2 { font-size: 1.2rem; margin: 1.2em 0 .5em; }
h3 { font-size: 1.05rem; margin: 0 0 .3em; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

.top { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; padding: 10px 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: .85rem; line-height: 1.15; text-decoration: none; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; width: 216px; flex: none; }
.brand .logo { font-size: 1.6rem; }
.search { flex: 1; max-width: 560px; margin: 0 auto; position: relative; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input[type=search] { border-radius: 999px; padding: 10px 16px 10px 40px; background: var(--bg); }
#me-box { margin-left: auto; display: flex; align-items: center; gap: 10px; }
#me-box .avatar { width: 40px; height: 40px; }
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.side { position: sticky; top: 62px; align-self: start; max-height: calc(100vh - 62px); overflow-y: auto; padding: 20px 0 30px; }
nav { display: flex; flex-direction: column; gap: 4px; }
.nav-i { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); font: inherit; background: none; border: 0; cursor: pointer; width: 100%; text-align: left; }
.nav-i svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-i:hover { background: var(--soft); }
.nav-i.on { background: var(--brand); color: var(--brand-ink); }
.side-h { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 22px 14px 6px; margin: 0; }
.s-room { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; text-decoration: none; color: var(--ink); font-size: .93rem; }
.s-room:hover { background: var(--soft); }
.s-room.on { background: var(--soft); font-weight: 600; }
.s-room .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--soft); color: var(--brand); display: grid; place-items: center; font-size: .75rem; font-weight: 700; flex: none; }
.s-room .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-room .lock { font-size: .7rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .04em; }
#side-foot { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 12px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid .card { margin: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 10px; }

label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
label.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
label.check input { margin-top: 4px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=url], input[type=search], select, textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
}
textarea { min-height: 90px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.btn { font: inherit; font-weight: 600; background: var(--brand); color: var(--brand-ink); border: 0; border-radius: 10px; padding: 9px 16px; cursor: pointer; text-decoration: none; display: inline-block; }
.btn:hover { filter: brightness(1.07); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.ghost { background: var(--soft); color: var(--brand); }
.btn.danger { background: none; color: var(--danger); padding: 4px 8px; font-weight: 500; }
.link { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer; }
.link:hover { color: var(--brand); }
.link.danger:hover { color: var(--danger); }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs a { padding: 7px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: .95rem; }
.tabs a.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--soft); flex: none; display: inline-grid; place-items: center; font-weight: 700; color: var(--brand); overflow: hidden; }
.avatar.lg { width: 96px; height: 96px; font-size: 2rem; }
.avatar.sm { width: 32px; height: 32px; font-size: .85rem; }

.post .head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.post .head a, .post .head strong { color: var(--ink); font-weight: 600; text-decoration: none; }
.post .head a:hover { text-decoration: underline; }
.post .body { white-space: pre-wrap; overflow-wrap: anywhere; }
.post .actions { display: flex; gap: 16px; margin-top: 10px; align-items: center; }
.post .actions .liked { color: var(--accent); font-weight: 600; }
.comments { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.comment { display: flex; gap: 8px; margin-bottom: 10px; }
.comment .bubble { background: var(--bg); border-radius: 12px; padding: 6px 12px; overflow-wrap: anywhere; white-space: pre-wrap; }

.badge { display: inline-block; font-size: .72rem; background: var(--soft); color: var(--brand); border-radius: 999px; padding: 1px 8px; margin-left: 6px; vertical-align: middle; font-weight: 600; }
.badge.warn { background: var(--peach); color: var(--accent); }
.notice { background: var(--soft); border-radius: 10px; padding: 10px 14px; font-size: .92rem; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 4px 12px; cursor: pointer; font: inherit; font-size: .9rem; }
.chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

details.lesson { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: var(--card); }
details.lesson summary { padding: 12px 16px; cursor: pointer; font-weight: 600; }
details.lesson .in { padding: 0 16px 16px; }
.video { position: relative; aspect-ratio: 16 / 9; margin: 10px 0; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
.prose { white-space: pre-wrap; overflow-wrap: anywhere; }

.files { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.file { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--bg); }
.file img, .file video { width: 100%; max-height: 200px; object-fit: cover; border-radius: 8px; display: block; margin-bottom: 6px; }

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-wrap { overflow-x: auto; }

.chat { display: grid; grid-template-columns: 260px 1fr; gap: 14px; }
.rooms { display: flex; flex-direction: column; gap: 6px; }
.room { display: block; padding: 10px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.room.on { border-color: var(--brand); background: var(--soft); }
.room small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msgs { height: min(60vh, 520px); overflow-y: auto; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.msg { display: flex; gap: 10px; margin-bottom: 12px; }
.msg .bubble { overflow-wrap: anywhere; white-space: pre-wrap; }
.msg .who { font-size: .85rem; font-weight: 600; }
.msg .who span { color: var(--muted); font-weight: 400; margin-left: 6px; }
.composer { display: flex; gap: 8px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.composer textarea { min-height: 44px; height: 44px; }
.auth { max-width: 420px; margin: 24px auto; }
.hero { text-align: center; padding: 18px 0 8px; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 18px; border-radius: 10px; z-index: 50; max-width: 90vw; }
.toast.err { background: var(--danger); color: #fff; }

@media (min-width: 761px) { .mobile-back, .chat .rooms { display: none; } .chat { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .chat { grid-template-columns: 1fr; }
  .chat.in-room .rooms { display: none; }
  .chat:not(.in-room) .pane { display: none; }
  .top { padding: 8px 14px; gap: 10px; flex-wrap: wrap; }
  .brand { width: auto; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .shell { grid-template-columns: 1fr; gap: 0; padding: 0 14px; }
  .side { position: static; max-height: none; padding: 10px 0 0; }
  nav { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 6px; }
  .nav-i { width: auto; white-space: nowrap; padding: 8px 12px; }
  #side-rooms, #side-foot { display: none; }
}


.post .head { align-items: flex-start; }
.who-col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.post-date { margin-left: auto; text-align: right; white-space: nowrap; }
.child-line { color: var(--brand); font-size: .9rem; line-height: 1.35; }
.child-line strong { font-weight: 700; }
.child-line .issue { color: var(--accent); font-weight: 600; }

#me-box { position: relative; }
.avatar-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.avatar-btn:hover .avatar { box-shadow: 0 0 0 3px var(--soft); }
.pop { position: absolute; right: 0; top: 52px; width: 240px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; z-index: 20; }
.pop-name { padding: 8px 14px 10px; font-weight: 600; border-bottom: 1px solid var(--line); margin-bottom: 6px; overflow-wrap: anywhere; }

/* ---- компоненты темы ---- */
.top { background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(14px); border-bottom-color: transparent; }
.card { background: color-mix(in srgb, var(--card) 72%, transparent); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid color-mix(in srgb, var(--card) 85%, transparent); border-radius: 24px; box-shadow: var(--shadow); }
.btn { background: var(--brand); color: var(--brand-ink); border-radius: 999px; padding: 11px 22px; }
.btn.ghost { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.arrow { display: inline-flex; align-items: center; gap: 12px; padding: 7px 8px 7px 22px; }
.btn.arrow::after { content: "↗"; width: 32px; height: 32px; border-radius: 50%; background: var(--card); color: var(--brand); display: grid; place-items: center; font-size: .95rem; }
.nav-i.on { background: var(--soft); color: var(--ink); font-weight: 650; }
.nav-i:hover { background: color-mix(in srgb, var(--soft) 60%, transparent); }
.tabs a.on, .chip.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.badge { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); padding: 2px 10px; }
.badge.warn { background: var(--peach); color: var(--accent); box-shadow: none; }
.notice { background: var(--soft); border-radius: 18px; }
.avatar { background: var(--soft); color: var(--brand); }
.search input[type=search] { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); border-color: transparent; }

.hero2 { position: relative; overflow: hidden; border-radius: 32px; padding: 44px 40px; margin-bottom: 18px; min-height: 300px;
  background: linear-gradient(120deg, var(--bg), var(--sky) 60%, var(--peach) 160%); }
.hero2 .copy { position: relative; z-index: 1; max-width: 460px; }
.hero2 h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin: 12px 0 14px; }
.hero2 p { color: var(--muted); max-width: 420px; margin: 0 0 22px; }
.pill { display: inline-block; font-size: .8rem; padding: 3px 12px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.play { color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.orbs { position: absolute; right: -30px; top: 50%; width: 360px; height: 300px; transform: translateY(-50%); }
.orbs i { position: absolute; border-radius: 50%; backdrop-filter: blur(2px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7), inset 8px 8px 30px rgba(255,255,255,.5), 0 20px 50px rgba(110, 95, 200, .22); }
.orbs i:nth-child(1) { width: 230px; height: 230px; left: 10px; top: 20px; background: linear-gradient(135deg, #ffe3d6, #e6c8f5 75%, rgba(255,255,255,.25)); }
.orbs i:nth-child(2) { width: 190px; height: 190px; left: 120px; top: 60px; background: linear-gradient(150deg, rgba(208,222,252,.95), rgba(244,240,255,.6)); animation: drift 9s ease-in-out infinite; }
.orbs i:nth-child(3) { width: 140px; height: 140px; left: 215px; top: 110px; background: linear-gradient(160deg, rgba(150,138,235,.88), rgba(208,222,252,.55)); animation: drift 11s ease-in-out infinite reverse; }
@keyframes drift { 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) { .orbs i { animation: none !important; } html { scroll-behavior: auto; } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; padding: 16px; margin-bottom: 22px; }
.stat { display: flex; align-items: center; gap: 12px; padding: 4px 10px; }
.stat b { display: block; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.1; }
.stat span.l { font-size: .82rem; color: var(--muted); }
.ico-chip { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--soft); color: var(--brand); }
.ico-chip svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-chip.c1 { background: var(--soft); color: var(--brand); } .ico-chip.c2 { background: var(--peach); color: var(--accent); }
.ico-chip.c3 { background: var(--mint); color: var(--brand); } .ico-chip.c4 { background: var(--sky); color: var(--brand); } .ico-chip.c5 { background: var(--rose); color: var(--brand); }

.course-card { display: flex; flex-direction: column; gap: 10px; min-height: 230px; text-decoration: none; color: inherit; transition: transform .2s; }
.course-card:hover { transform: translateY(-3px); }
.course-card h3 { font-size: 1.15rem; letter-spacing: -.01em; margin-top: 10px; }
.course-card .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.arrow-btn { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); }
.course-card.dark { background: var(--ink); color: var(--bg); }
.course-card.dark .muted { color: color-mix(in srgb, var(--bg) 65%, transparent); }
.course-card.dark .arrow-btn { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }

@media (max-width: 760px) {
  .hero2 { padding: 28px 22px 250px; border-radius: 26px; }
  .orbs { right: 50%; transform: translate(50%, 0) scale(.85); top: auto; bottom: -40px; }
}

/* шапка выровнена по сетке платформы: логотип над иконками меню, поиск над лентой, аватарка по правому краю контента */
@media (min-width: 761px) {
  .top { padding-left: max(24px, calc((100% - 1240px) / 2 + 24px)); padding-right: max(24px, calc((100% - 1240px) / 2 + 24px)); gap: 16px; }
  .brand { width: 252px; padding-left: 14px; }
  .search { margin: 0; }
}

/* телефон: имя и дата в одной строке, данные о ребёнке отдельной строкой на всю ширину */
@media (max-width: 760px) {
  .post .head { flex-wrap: wrap; align-items: center; row-gap: 6px; }
  .who-col { display: contents; }
  .who-col > :first-child { flex: 1 1 0; min-width: 0; align-self: center; }
  .post-date { order: 2; white-space: normal; font-size: .78rem; max-width: 40%; }
  .child-line { order: 5; flex-basis: 100%; margin-left: 56px; }
  main#app { padding-top: 14px; }
  h1 { font-size: 1.6rem; }
  .card { border-radius: 20px; padding: 14px; }
  .stats { grid-template-columns: 1fr 1fr; }
  .fields { grid-template-columns: 1fr; }
  .top { position: static; }
}

.audio { margin: 12px 0; padding: 12px 14px; background: var(--soft); border-radius: 16px; }
.audio audio { width: 100%; margin-top: 6px; }
.lesson-video { width: 100%; max-height: 420px; border-radius: 14px; margin: 10px 0; background: #000; }

.speed { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.speed-btn { font: inherit; font-size: .85rem; font-weight: 600; padding: 4px 14px; border-radius: 999px; border: 0; cursor: pointer; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.speed-btn:hover { background: color-mix(in srgb, var(--card) 70%, var(--soft)); }
.speed-btn.on { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.text-btn { margin-left: auto; }
.transcript { margin-top: 10px; padding: 12px 14px; background: var(--card); border-radius: 14px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.6; max-height: 360px; overflow-y: auto; }
.pic { margin: 14px 0; }
.pic img { display: block; max-width: 100%; max-height: 460px; border-radius: 14px; }
.pic figcaption { margin-top: 4px; }
.note { margin: 4px 2px 18px; line-height: 1.65; }
.blk-h { margin: 22px 0 6px; font-size: 1.1rem; letter-spacing: .01em; }
.blk-t { margin: 8px 0; line-height: 1.65; }
.video-ph { margin: 12px 0; padding: 22px; border-radius: 16px; background: var(--soft); color: var(--muted); text-align: center; display: grid; gap: 12px; }

/* уроки: карточки-аккордеон */
details.lesson { border: 0; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .2s; }
details.lesson summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; font-weight: 650; font-size: 1.05rem; list-style: none; letter-spacing: -.01em; }
details.lesson summary::-webkit-details-marker { display: none; }
details.lesson summary::after { content: ""; margin-left: auto; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
details.lesson[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
details.lesson[open] summary { border-bottom: 1px solid var(--line); }
details.lesson summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
details.lesson .num { flex: none; width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--peach); color: var(--accent); font-size: .95rem; font-weight: 700; }
details.lesson[open] .num { background: var(--brand); color: var(--brand-ink); }
details.lesson .ttl { min-width: 0; overflow-wrap: anywhere; }
details.lesson .in { padding: 8px 20px 20px; }
.blk-t p { margin: .7em 0; line-height: 1.7; }
.blk-ul { margin: .7em 0; padding-left: 1.2em; line-height: 1.7; }
.blk-ul li::marker { color: var(--mid); }

/* расписание курса */
.sched { list-style: none; margin: 14px 0; padding: 0; position: relative; display: grid; gap: 8px; }
.sched::before { content: ""; position: absolute; left: 27px; top: 14px; bottom: 14px; width: 2px; background: var(--line); }
.sched li { position: relative; display: flex; align-items: center; gap: 14px; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--bg); }
.sched .d { flex: none; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--brand); color: var(--brand-ink); font-weight: 700; font-size: 1rem; line-height: 1; box-shadow: 0 0 0 4px var(--card); }
.sched .d small { font-size: .5rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; opacity: .8; margin-bottom: 2px; }
.sched .t { line-height: 1.4; font-weight: 500; }
.sched li.free { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); }
.sched li.free .d { background: var(--peach); color: var(--accent); }
.sched li.free .t { font-weight: 400; font-style: italic; }
@media (max-width: 760px) { details.lesson .in { padding: 4px 14px 16px; } details.lesson summary { padding: 14px; } }

/* чат в стиле мессенджера */
.pane { display: flex; flex-direction: column; min-width: 0; }
.chead { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.chead .mobile-back { display: none; text-decoration: none; font-size: 1.3rem; line-height: 1; }
@media (max-width: 760px) { .chead .mobile-back { display: inline; } }
.msgs { height: min(66vh, 620px); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; border-radius: 0; background: color-mix(in srgb, var(--soft) 55%, var(--bg)); scroll-behavior: auto; }
.msgs .empty { margin: auto; }
.dsep { align-self: center; margin: 12px 0 8px; }
.dsep span { display: inline-block; padding: 3px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 14%, transparent); color: var(--ink); font-size: .78rem; font-weight: 600; }
.m { display: flex; align-items: flex-end; gap: 8px; max-width: 100%; border-radius: 16px; transition: background .4s; }
.m.first { margin-top: 8px; }
.m.own { justify-content: flex-end; }
.m .av { width: 32px; flex: none; }
.m .b { position: relative; max-width: min(78%, 520px); min-width: 64px; padding: 7px 12px 6px; background: var(--card); border-radius: 6px 18px 18px 6px; box-shadow: 0 1px 1px rgba(80, 70, 160, .08); cursor: pointer; overflow-wrap: anywhere; }
.m.first .b { border-top-left-radius: 18px; }
.m.last .b { border-bottom-left-radius: 18px; }
.m.own .b { background: var(--brand); color: var(--brand-ink); border-radius: 18px 6px 6px 18px; }
.m.own.first .b { border-top-right-radius: 18px; }
.m.own.last .b { border-bottom-right-radius: 18px; }
.m .nm { font-size: .82rem; font-weight: 700; margin-bottom: 2px; color: hsl(var(--h) 40% 34%); }
@media (prefers-color-scheme: dark) { .m .nm { color: hsl(var(--h) 45% 72%); } }
.m .nm .badge { margin-left: 6px; }
.m .tx { white-space: pre-wrap; line-height: 1.45; }
.m .meta { text-align: right; font-size: .7rem; opacity: .65; margin-top: 1px; user-select: none; }
.m.flash { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.m .rq { margin: 2px 0 5px; padding: 3px 8px; border-left: 3px solid var(--brand); border-radius: 4px 8px 8px 4px; background: color-mix(in srgb, var(--brand) 12%, transparent); font-size: .85rem; display: grid; cursor: pointer; }
.m .rq strong { color: var(--brand); font-size: .8rem; }
.m .rq span { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m.own .rq { border-left-color: var(--brand-ink); background: rgba(255, 255, 255, .18); }
.m.own .rq strong { color: var(--brand-ink); }
.rxs { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.rx { font: inherit; font-size: .8rem; padding: 1px 8px; border-radius: 999px; border: 0; cursor: pointer; background: color-mix(in srgb, var(--brand) 14%, transparent); color: inherit; }
.rx.on { background: var(--brand); color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand-ink) inset; }
.m.own .rx { background: rgba(255, 255, 255, .22); }
.m.own .rx.on { background: var(--brand-ink); color: var(--brand); }

.composer { flex-direction: column; gap: 6px; border-radius: 0 0 var(--radius) var(--radius); }
.crow { display: flex; align-items: flex-end; gap: 8px; }
.crow textarea { flex: 1; resize: none; border-radius: 22px; padding: 11px 16px; line-height: 20px; max-height: 160px; }
.send { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--brand); cursor: pointer; display: grid; place-items: center; }
.send svg { width: 20px; height: 20px; fill: var(--brand-ink); stroke: var(--brand-ink); stroke-width: 1.5; stroke-linejoin: round; }
.cbar { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 12px; border-left: 3px solid var(--brand); background: var(--soft); border-radius: 4px 10px 10px 4px; }
.cbar[hidden] { display: none; }
.cbar-in { flex: 1; min-width: 0; display: grid; font-size: .88rem; }
.cbar-in strong { color: var(--brand); }
.cbar-in span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.cbar .x { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 1rem; padding: 6px 8px; }

.msg-menu { position: fixed; z-index: 60; min-width: 210px; padding: 6px; background: var(--card); border-radius: 16px; box-shadow: 0 10px 40px rgba(40, 30, 110, .25), 0 0 0 1px var(--line); display: grid; }
.msg-menu button { font: inherit; text-align: left; padding: 9px 12px; border: 0; background: none; border-radius: 10px; cursor: pointer; color: var(--ink); }
.msg-menu button:hover { background: var(--soft); }
.msg-menu .danger { color: var(--danger); }
.rx-row { display: flex; justify-content: space-between; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.rx-row button { padding: 5px 7px; font-size: 1.25rem; line-height: 1; }
.rx-row button.on { background: var(--soft); }
@media (max-width: 760px) { .msgs { height: calc(100dvh - 330px); min-height: 320px; } .m .b { max-width: 84%; } }

/* голосовые сообщения */
.vp { display: flex; align-items: center; gap: 10px; min-width: 230px; padding: 2px 0; }
.vbtn { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--brand); }
.vbtn svg { width: 18px; height: 18px; fill: var(--brand-ink); }
.m.own .vbtn { background: var(--brand-ink); }
.m.own .vbtn svg { fill: var(--brand); }
.vbar { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, currentColor 22%, transparent); cursor: pointer; position: relative; padding: 8px 0; background-clip: content-box; }
.vbar i { display: block; height: 6px; margin-top: -8px; border-radius: 3px; background: var(--brand); width: 0; position: absolute; left: 0; top: 8px; }
.m.own .vbar i { background: var(--brand-ink); }
.vt { font-size: .78rem; font-variant-numeric: tabular-nums; min-width: 34px; opacity: .8; }
.vrate { font: inherit; font-size: .75rem; font-weight: 700; border: 0; border-radius: 999px; padding: 2px 8px; cursor: pointer; background: color-mix(in srgb, currentColor 16%, transparent); color: inherit; }
.send.mic { background: var(--soft); }
.send.mic svg { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; }
.composer .mic { display: grid; }
.composer.typing .mic { display: none; }
.composer:not(.typing) .crow .send:not(.mic) { display: none; }
.composer:not(.typing):not(:has(.mic)) .crow .send { display: grid; }
.recbar { display: none; align-items: center; gap: 10px; padding: 0 2px; min-height: 44px; }
.recbar .send { margin-left: auto; }
.recbar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--danger); animation: rec-blink 1s infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .recbar .dot { animation: none; } }
.composer.recording .crow, .composer.recording .cbar { display: none; }
.composer.recording .recbar { display: flex; }
.vbar { height: 8px; padding: 0; background: color-mix(in srgb, currentColor 22%, transparent); background-clip: border-box; }
.vbar i { margin: 0; top: 0; bottom: 0; height: auto; }

/* вопросы к урокам */
.ask { margin-top: 22px; padding: 16px; border-radius: 18px; background: var(--bg); display: grid; gap: 10px; }
.ask h3 { margin: 0; }
.qa { padding: 12px 14px; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; }
.qa.done { box-shadow: inset 3px 0 0 var(--brand), inset 0 0 0 1px var(--line); }
.q-h { font-size: .82rem; color: var(--muted); }
.q-b { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.q-a { padding: 10px 12px; border-radius: 12px; background: var(--soft); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.q-a strong { display: block; font-size: .8rem; color: var(--brand); margin-bottom: 2px; }
.qcard .row.between { flex-wrap: wrap; gap: 8px; }
.nav-i .cnt { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .72rem; line-height: 1.5; text-align: center; font-weight: 700; }

/* список уроков курса */
.lessons { display: grid; gap: 10px; margin-bottom: 20px; }
.lcard { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.lcard:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(80, 70, 160, .06), 0 16px 36px rgba(110, 95, 200, .14); }
.lcard:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.lcard .num { flex: none; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: var(--peach); color: var(--accent); font-weight: 700; }
.lc-t { flex: 1; min-width: 0; font-weight: 650; font-size: 1.02rem; letter-spacing: -.01em; overflow-wrap: anywhere; display: grid; gap: 2px; }
.lc-t small { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-weight: 400; font-size: .82rem; }
.lc-go { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.lcard:hover .lc-go { background: var(--brand); color: var(--brand-ink); box-shadow: none; }

/* страница урока */
.crumb { margin: 0 0 10px; }
.ln { margin-bottom: 18px; }
.ln-row { display: flex; align-items: center; gap: 12px; }
.ln-row b { flex: none; font-size: 1.05rem; font-weight: 650; }
.ln-line { flex: 1; height: 2px; border-radius: 1px; background: var(--brand); opacity: .55; }
.ln-arr { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; font-size: 1.15rem; color: var(--brand-ink); background: var(--brand); }
.ln-arr.off { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); opacity: .6; }
a.ln-arr:hover { filter: brightness(1.1); }
.ln-titles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; font-size: .92rem; }
.ln-titles a { color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ln-titles a:last-child { text-align: right; }
.ln-titles a:hover { color: var(--ink); }
.l-title { margin: .1em 0 .5em; font-size: clamp(1.5rem, 4vw, 2.2rem); overflow-wrap: anywhere; }
.ltabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.ltabs button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; padding: 9px 18px; border: 0; border-radius: 999px; cursor: pointer; background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.ltabs button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ltabs button.on { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.ltabs .cnt2 { font-size: .75rem; padding: 0 7px; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); }
.ltabs .cnt { min-width: 20px; padding: 0 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .72rem; line-height: 1.6; text-align: center; font-weight: 700; }
.l-body { padding: 8px 20px 20px; }
.l-body > :first-child { margin-top: 12px; }
.ask { margin-top: 0; }
.l-foot { display: flex; justify-content: space-between; gap: 12px; margin: 22px 0 10px; flex-wrap: wrap; }
.l-foot .btn { max-width: 100%; display: inline-flex; gap: 8px; align-items: center; text-align: left; }
.l-foot .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 36ch; }
@media (max-width: 760px) {
  .l-body { padding: 4px 14px 16px; }
  .ln-row { gap: 8px; }
  .l-foot .btn { width: 100%; justify-content: center; }
  .l-foot .btn span { max-width: 26ch; }
}
.ask-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; padding: 14px 16px; border-radius: 16px; background: var(--bg); }
.ask-cta span { font-weight: 600; }
.lessons + .ask { margin-top: 8px; margin-bottom: 20px; }

/* ---------- дневник наблюдений ---------- */
.diary { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.diary h3 { margin: 0 0 4px; }
.dsec { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; }
.dsec legend { font-weight: 700; padding: 0; margin-bottom: 8px; font-size: 1.02rem; }
.df { margin-bottom: 14px; }
.df-l { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 4px; }
.df-h { font-size: .84rem; color: var(--muted); margin: 0 0 6px; padding-left: 10px; border-left: 3px solid var(--soft); }
.df textarea { width: 100%; min-height: 76px; resize: vertical; }
.d-sep { margin: 18px 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--bg); color: var(--muted); font-size: .92rem; }
.df-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dchip { cursor: pointer; }
.dchip input { position: absolute; opacity: 0; pointer-events: none; }
.dchip span { display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .92rem; transition: background .15s, border-color .15s; }
.dchip input:checked + span { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.dchip input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.d-bar { position: sticky; bottom: 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 0; background: var(--card); border-top: 1px solid var(--line); }
.d-prog { height: 8px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.d-prog > span { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.d-prog.sm { height: 5px; margin-top: 5px; min-width: 90px; }
.d-day h2 { font-size: 1.15rem; margin: 0 0 6px; }
.d-day h3 { font-size: 1rem; margin: 18px 0 8px; color: var(--accent); }
.d-tab { width: 100%; border-collapse: collapse; font-size: .94rem; }
.d-tab td { padding: 9px 10px; border-top: 1px solid var(--line); vertical-align: top; }
.d-q { width: 46%; }
.d-a { white-space: pre-wrap; overflow-wrap: anywhere; }
.d-head, .d-card { margin-bottom: 14px; }
@media (max-width: 640px) { .d-tab, .d-tab tbody, .d-tab tr, .d-tab td { display: block; width: 100%; } .d-tab tr { border-top: 1px solid var(--line); padding: 8px 0; } .d-tab td { border: 0; padding: 2px 0; } .d-q { font-weight: 600; } }
@media print {
  .top, .side, .toast, .no-print, .l-foot { display: none !important; }
  body, .shell, main { background: #fff !important; color: #000 !important; display: block !important; padding: 0 !important; max-width: none !important; }
  .card { box-shadow: none !important; border: 0 !important; padding: 0 !important; break-inside: avoid-page; }
  .d-day { break-before: auto; margin-bottom: 18px; }
  .d-tab tr { break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

.card > .diary { margin-top: 0; padding-top: 0; border-top: 0; }
.ask-cta + .ask-cta { margin-top: 10px; }

.lock { pointer-events: none; opacity: .4; filter: grayscale(1); }
.d-left { font-weight: 600; color: var(--accent); margin-left: auto; }
.d-gate { margin: 10px 0 0; color: var(--muted); }

/* ---------- карта пути ---------- */
.map { list-style: none; margin: 18px 0 0; padding: 0; position: relative; }
.map::before { content: ''; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: var(--line); }
.st { position: relative; display: flex; gap: 16px; margin-bottom: 16px; }
.st-n { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); color: var(--muted); z-index: 1; }
.st.now .st-n { background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.st.done .st-n { background: var(--soft); color: var(--brand); box-shadow: inset 0 0 0 2px var(--brand); }
.st-b { flex: 1; min-width: 0; background: var(--card); border-radius: 18px; padding: 14px 18px 16px; box-shadow: inset 0 0 0 1px var(--line); }
.st.now .st-b { box-shadow: inset 0 0 0 2px var(--brand); }
.st.todo .st-b { opacity: .85; }
.st-b h3 { margin: 0 0 6px; }
.st-b p { margin: 0 0 10px; }
.paths { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.path { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--bg); color: var(--muted); }
.path strong { color: var(--ink); }
.path.mine { background: var(--brand); color: var(--brand-ink); }
.path.mine strong { color: var(--brand-ink); }
.path.off { opacity: .45; }
.stage-card { margin-bottom: 0; }

/* =====================================================================
   Спокойный чистый стиль: тихий фон, белые мягкие карточки, тёмные
   спокойные кнопки, серифные заголовки, пастельные акценты
   ===================================================================== */
:root {
  --bg: #f3f1f7; --card: #ffffff; --ink: #1f1d2e; --muted: #77758c; --line: #e9e6f0;
  --brand: #5b52a3; --brand-ink: #ffffff; --accent: #8a5a3c; --soft: #efecf8; --danger: #b8404f;
  --peach: #f8e9de; --mint: #e5eee6; --sky: #e6ecf5; --rose: #f6e6ec; --mid: #8b83c4;
  --dark: #6f66b3; --dark-ink: #ffffff;
  --shadow: 0 1px 2px rgba(40, 35, 70, .04), 0 12px 32px rgba(60, 50, 110, .07);
  --soft-shadow: 0 1px 2px rgba(40, 35, 70, .06), 0 4px 14px rgba(60, 50, 110, .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17161f; --card: #211f2b; --ink: #eeecf7; --muted: #a09eb8; --line: #33313f;
    --brand: #b9b0f0; --brand-ink: #17161f; --accent: #f0c3a6; --soft: #2a2837; --danger: #ff8f9c;
    --peach: #3a2f2c; --mint: #26332b; --sky: #262c3a; --rose: #382a32; --mid: #b9b0f0;
    --dark: #a79fe0; --dark-ink: #17161f;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.28);
    --soft-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.2);
  }
}

/* фон: один тихий вертикальный градиент и два еле заметных тёплых отсвета */
body { background: linear-gradient(180deg, #eeebf8 0%, #f5f2f6 42%, #faf2ec 100%) fixed; }
@media (prefers-color-scheme: dark) { body { background: linear-gradient(180deg, #1d1b29 0%, #17161f 55%, #1d1a1b 100%) fixed; } }
body::before { display: none; }
body::after, html::before { content: ''; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; box-shadow: none; filter: blur(34px); animation: none; }
body::after { width: 560px; height: 560px; right: -180px; top: -160px; background: radial-gradient(circle, rgba(246, 214, 190, .6), transparent 66%); opacity: 1; }
html::before { width: 520px; height: 520px; left: -200px; bottom: -200px; background: radial-gradient(circle, rgba(201, 193, 240, .5), transparent 66%); opacity: 1; }
@media (prefers-color-scheme: dark) { body::after { opacity: .25; } html::before { opacity: .3; } }

/* белые мягкие поверхности */
.top { background: color-mix(in srgb, var(--card) 72%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.card, .lcard, .st-b, .qa, .pop, .msg-menu {
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: var(--shadow); backdrop-filter: blur(10px);
}
.card { border-radius: 26px; }
.lcard { border-radius: 22px; }
.lcard:hover { box-shadow: 0 1px 2px rgba(40,35,70,.05), 0 16px 38px rgba(60,50,110,.11); }
.audio, .video-ph, .file, .d-sep, .ask-cta, .path, .notice {
  background: var(--soft); border: 0; backdrop-filter: none; box-shadow: none;
}
.notice { background: var(--peach); }
input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range]), textarea, select {
  background: color-mix(in srgb, var(--bg) 70%, var(--card)); border: 1px solid var(--line); border-radius: 16px;
  backdrop-filter: none; box-shadow: inset 0 1px 2px rgba(40, 35, 70, .04);
}
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--mid); box-shadow: 0 0 0 4px color-mix(in srgb, var(--mid) 20%, transparent); }

/* кнопки: тёмные и спокойные, без ярких цветов */
.btn { background: var(--dark); background-image: none; color: var(--dark-ink); border-radius: 999px; padding: 10px 22px;
  box-shadow: 0 6px 16px rgba(90, 80, 170, .22), inset 0 1px 0 rgba(255, 255, 255, .14); transition: transform .15s, box-shadow .15s, filter .15s; }
.btn:hover { filter: brightness(1.18); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(90, 80, 170, .26), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn.ghost { background: var(--card); background-image: none; color: var(--ink); box-shadow: var(--soft-shadow), inset 0 0 0 1px var(--line); backdrop-filter: none; }
.btn.ghost:hover { filter: none; box-shadow: 0 6px 18px rgba(60, 50, 110, .12), inset 0 0 0 1px var(--line); }
.btn.danger { background: none; box-shadow: none; color: var(--danger); }
.btn:disabled { filter: none; opacity: .45; transform: none; }

/* выбранное: тёмная пилюля (меню — мягкая белая) */
.tabs a.on, .chip.on, .ltabs button.on, .speed-btn.on, .dchip input:checked + span, .st.now .st-n {
  background: var(--dark); color: var(--dark-ink); border-color: transparent; box-shadow: 0 6px 14px rgba(90, 80, 170, .22);
}
.path.mine { background: var(--dark); color: var(--dark-ink); box-shadow: none; }
.path.mine strong { color: var(--dark-ink); } .path.mine .small { color: color-mix(in srgb, var(--dark-ink) 85%, transparent); }
.nav-i.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: var(--soft-shadow); }
.nav-i.on svg { stroke: var(--brand); }
.ltabs button, .tabs a, .chip, .speed-btn { background: var(--card); box-shadow: var(--soft-shadow), inset 0 0 0 1px var(--line); }
.ltabs button.on, .tabs a.on { box-shadow: 0 6px 14px rgba(90, 80, 170, .22); }
.ln-arr { background: var(--dark); color: var(--dark-ink); box-shadow: 0 6px 14px rgba(90, 80, 170, .22); }
.ln-arr.off { background: var(--card); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.ln-line { background: var(--line); opacity: 1; height: 2px; }
.d-prog { background: var(--soft); }
.d-prog > span { background: linear-gradient(90deg, #cfc8f0, #9a91d6); box-shadow: none; }
.map::before { background: var(--line); opacity: 1; }
.st-n { background: var(--card); box-shadow: inset 0 0 0 2px var(--line); }
.st.done .st-n { background: var(--mint); color: #3f6a4a; box-shadow: none; }
.st.now .st-b { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--dark); }

/* метки и значки — пастельные, без свечения */
.badge { background: var(--soft); color: var(--brand); box-shadow: none; }
.badge.warn { background: var(--peach); color: var(--accent); box-shadow: none; }
.s-room .dot, .avatar-btn { background: var(--soft); color: var(--brand); box-shadow: none; }
.s-room.on .dot { background: var(--dark); color: var(--dark-ink); }
.ico-chip { box-shadow: none; }
.ico-chip.c1 { background: var(--soft); color: var(--brand); }
.ico-chip.c2 { background: var(--peach); color: #9a5f3b; }
.ico-chip.c3 { background: var(--mint); color: #4f6f55; }
.ico-chip.c4 { background: var(--sky); color: #4a6590; }
.ico-chip.c5 { background: var(--rose); color: #9a4f69; }
.lcard .num { box-shadow: none; background: var(--soft); color: var(--brand); }
.lessons .lcard:nth-child(3n+2) .num { background: var(--peach); color: #9a5f3b; }
.lessons .lcard:nth-child(3n) .num { background: var(--mint); color: #4f6f55; }
.lcard:hover .lc-go, .course-card:hover .arrow-btn { background: var(--dark); color: var(--dark-ink); box-shadow: none; }
.course-card .arrow-btn { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }

/* заголовки: обычный шрифт без засечек и без курсива */
h1, .l-title { font-family: inherit; font-weight: 650; letter-spacing: -.03em; -webkit-text-fill-color: currentColor; background: none; color: var(--ink); }
h2 { font-family: inherit; font-weight: 650; letter-spacing: -.01em; }
h3 { font-family: inherit; font-weight: 650; font-size: 1.05rem; letter-spacing: 0; }
.course-card h3 { font-size: 1.15rem; }
.dsec legend { font-family: inherit; font-weight: 650; font-size: 1.02rem; }
h1 em, h2 em { background: none; -webkit-text-fill-color: currentColor; color: var(--muted); font-family: inherit; font-style: normal; font-weight: 400; letter-spacing: -.02em; }

/* =====================================================================
   Тёплая палитра: кремовый и персиковый фон, абрикосовый, шалфейный,
   масляно-жёлтый и салатовый — мягкие пастельные тона
   ===================================================================== */
:root {
  --bg: #f9ece1; --card: #fffaf6; --ink: #2d2823; --muted: #8a7b6e; --line: #f0e0d2;
  --brand: #b3622f; --brand-ink: #3a2a1f; --accent: #a8602f; --soft: #f7e3d3; --danger: #b8453a;
  --peach: #f6dcc6; --mint: #dfe5da; --sky: #f6f2c8; --rose: #f5e1d8; --lime: #e9f0cc; --mid: #e0a36f;
  --dark: #f2d1b6; --dark-ink: #3a2a1f; --dark-hover: #edc4a3;
  --shadow: 0 1px 2px rgba(150, 100, 60, .05), 0 12px 32px rgba(170, 110, 60, .09);
  --soft-shadow: 0 1px 2px rgba(150, 100, 60, .07), 0 4px 14px rgba(170, 110, 60, .08);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f1a17; --card: #2a2420; --ink: #f3e9df; --muted: #b3a597; --line: #3b322c;
    --brand: #f0b78e; --brand-ink: #2a1f17; --accent: #f0b78e; --soft: #33291f; --danger: #ff9588;
    --peach: #3d2e24; --mint: #2a3329; --sky: #38371f; --rose: #3a2b2a; --lime: #2f3820; --mid: #d79b68;
    --dark: #e9c3a3; --dark-ink: #2a1f17; --dark-hover: #f1cfb2;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.28);
    --soft-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.2);
  }
}
body { background: linear-gradient(180deg, #fbefe5 0%, #f9ebde 55%, #f8eddd 100%) fixed; }
@media (prefers-color-scheme: dark) { body { background: linear-gradient(180deg, #241d19 0%, #1f1a17 60%, #211b16 100%) fixed; } }
/* мягкие круги, как в примере: персиковый слева, салатово-жёлтый справа внизу */
body::after { width: 520px; height: 520px; left: -240px; right: auto; top: 22%; background: radial-gradient(circle, rgba(242, 196, 156, .65), transparent 66%); }
html::before { width: 560px; height: 560px; left: auto; right: -220px; bottom: -240px; background: radial-gradient(circle, rgba(236, 240, 178, .8), transparent 66%); }
@media (prefers-color-scheme: dark) { body::after { opacity: .22; } html::before { opacity: .22; } }

.btn { box-shadow: 0 6px 16px rgba(190, 120, 70, .2), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn:hover { filter: none; background: var(--dark-hover); box-shadow: 0 10px 22px rgba(190, 120, 70, .26), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn.ghost { color: var(--ink); }
.btn.ghost:hover { background: var(--card); }
.tabs a.on, .chip.on, .ltabs button.on, .speed-btn.on, .dchip input:checked + span, .st.now .st-n, .ln-arr, .ltabs button.on, .tabs a.on {
  box-shadow: 0 4px 12px rgba(190, 120, 70, .22);
}
.d-prog > span { background: linear-gradient(90deg, #f6d7bd, #e9ae83); }
.st.now .st-b { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--mid); }
.lcard:hover .lc-go, .course-card:hover .arrow-btn { background: var(--dark); color: var(--dark-ink); }
.nav-i.on svg { stroke: var(--brand); }

/* пастельные плашки — у каждой свой тёплый или зелёный оттенок */
.ico-chip.c1 { background: var(--peach); color: #a8602f; }
.ico-chip.c2 { background: var(--mint); color: #55705a; }
.ico-chip.c3 { background: var(--sky); color: #8a7a1f; }
.ico-chip.c4 { background: var(--lime); color: #6b7f2a; }
.ico-chip.c5 { background: var(--rose); color: #a05a4a; }
.lcard .num { background: var(--peach); color: #a8602f; }
.lessons .lcard:nth-child(4n+2) .num { background: var(--mint); color: #55705a; }
.lessons .lcard:nth-child(4n+3) .num { background: var(--sky); color: #8a7a1f; }
.lessons .lcard:nth-child(4n) .num { background: var(--lime); color: #6b7f2a; }
.badge { background: var(--soft); color: var(--brand); }
.badge.warn { background: var(--peach); color: var(--accent); }
.s-room .dot, .avatar-btn { background: var(--peach); color: var(--accent); }
.st.done .st-n { background: var(--mint); color: #55705a; }
.audio { background: var(--peach); }
.video-ph { background: var(--mint); }
.ask-cta { background: var(--sky); }
.d-sep { background: var(--lime); }
.notice { background: var(--peach); }
.path { background: var(--soft); }
.path.mine { background: var(--dark); color: var(--dark-ink); }
.path.mine strong { color: var(--dark-ink); } .path.mine .small { color: color-mix(in srgb, var(--dark-ink) 85%, transparent); }
.speed-btn, .ltabs button, .tabs a, .chip { background: var(--card); }
@media (prefers-color-scheme: dark) {
  .ico-chip.c1, .lcard .num { color: #f0b78e; } .ico-chip.c2, .lessons .lcard:nth-child(4n+2) .num, .st.done .st-n { color: #a9c9a8; }
  .ico-chip.c3, .lessons .lcard:nth-child(4n+3) .num { color: #e6d98a; } .ico-chip.c4, .lessons .lcard:nth-child(4n) .num { color: #c6dc8a; } .ico-chip.c5 { color: #f0a999; }
}
/* выбранное — чуть насыщеннее абрикосового, чтобы читалось на плашках */
:root { --sel: #e9b690; }
@media (prefers-color-scheme: dark) { :root { --sel: #e9c3a3; } }
.tabs a.on, .chip.on, .ltabs button.on, .speed-btn.on, .dchip input:checked + span, .st.now .st-n, .ln-arr, .path.mine { background: var(--sel); color: var(--dark-ink); }
.audio { background: var(--soft); }

/* иконки: единый линейный стиль */
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }
.ic.fill { fill: currentColor; }
.ei { display: inline-flex; align-items: center; }
.ei .ic { width: 1.05em; height: 1.05em; vertical-align: 0; }
.brand .logo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: var(--peach); color: var(--accent); }
.brand .logo svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-i svg { stroke-width: 1.6; }
.post .actions .liked .ic { fill: currentColor; }

/* фон белый */
@media not (prefers-color-scheme: dark) {
  :root { --bg: #ffffff; --card: #ffffff; --line: #efe8e1; --shadow: 0 1px 2px rgba(60, 50, 40, .05), 0 10px 28px rgba(60, 50, 40, .07); --soft-shadow: 0 1px 2px rgba(60, 50, 40, .06), 0 4px 12px rgba(60, 50, 40, .06); }
  body { background: #ffffff; }
  body::after, html::before { display: none; }
  input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range]), textarea, select { background: #faf6f2; }
  .top { background: rgba(255, 255, 255, .85); }
}
@media not (prefers-color-scheme: dark) { .msgs { background: #fcfaf8; } }
/* главная: светлый блок и пастельные шары в общей гамме */
.hero { background: linear-gradient(120deg, var(--card), color-mix(in srgb, var(--peach) 55%, var(--card)) 70%, color-mix(in srgb, var(--sky) 70%, var(--card)) 160%); }
.orbs i { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8), inset 8px 8px 30px rgba(255,255,255,.55), 0 20px 50px rgba(190, 120, 70, .16); }
.orbs i:nth-child(1) { background: linear-gradient(135deg, #f8dcc4, #f0bc94 75%, rgba(255,255,255,.3)); }
.orbs i:nth-child(2) { background: linear-gradient(150deg, rgba(240,244,200,.95), rgba(255,252,240,.6)); }
.orbs i:nth-child(3) { background: linear-gradient(160deg, rgba(190,205,180,.9), rgba(226,232,218,.55)); }
.hero2 { background: linear-gradient(120deg, var(--card) 35%, color-mix(in srgb, var(--peach) 45%, var(--card)) 100%); border: 1px solid var(--line); }

/* =====================================================================
   Шрифтовая пара на всём сайте:
   1) шрифт интерфейса — тот же, что в пунктах меню (системный): весь текст, кнопки, описания, поля
   2) Manrope — только заголовки (страниц, курсов, уроков, разделов)
   ===================================================================== */
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root { --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head: "Manrope", var(--font-ui); }
body { font-family: var(--font-ui); }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, .l-title, .dsec legend, .brand { font-family: var(--font-head); }
h1, .l-title { font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
h2 { font-weight: 700; letter-spacing: -.01em; }
h3, .dsec legend { font-weight: 650; letter-spacing: 0; }
h1 em, h2 em { font-family: var(--font-head); font-weight: 500; }
/* описание курса — по размеру и цвету рядом с пунктами меню */
.card > p.prose { font-size: .95rem; line-height: 1.6; color: var(--muted); }

/* карточки курсов с иллюстрацией */
.course-card { padding: 0; overflow: hidden; gap: 0; min-height: 0; }
.course-card .c-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 20px; flex: 1; }
.course-card .c-body h3 { margin: 0; }
.course-card .c-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.course-card .foot { padding-top: 6px; }
.c-art { position: relative; height: 170px; background: #fdf6ef; overflow: hidden; }
.c-art svg { width: 100%; height: 100%; display: block; }
.c-art.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-age { position: absolute; left: 14px; top: 14px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .85); color: var(--ink); font-size: .75rem; font-weight: 600; box-shadow: 0 1px 4px rgba(60, 50, 40, .08); }
.course-card.locked .c-art { filter: saturate(.55); opacity: .85; }
.course-banner { border-radius: 26px; overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow); }
.course-banner .c-art { height: 190px; }
@media (prefers-color-scheme: dark) { .c-art { background: #2e2722; } .c-age { background: rgba(42, 36, 32, .85); } }

.c-art { height: auto; aspect-ratio: 3 / 2; }
.course-banner .c-art { aspect-ratio: auto; height: 200px; }

/* Чаты плиткой */
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.rtile { display: flex; flex-direction: column; gap: 6px; padding: 18px; min-height: 150px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .15s, box-shadow .15s; }
.rtile:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(120, 80, 40, .1); }
.rtile .dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--soft); color: var(--brand); font-weight: 700; margin-bottom: 6px; }
.rtile strong { font-size: 1.05rem; line-height: 1.25; }
.rtile small { color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rtile.lock { opacity: .6; }

/* Поля дневника прямо в уроке */
.inl-diary { margin: 14px 0 22px; padding: 16px 18px; border-radius: 18px; background: var(--soft); border: 1px solid var(--line); }
.inl-diary .inl-h { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 10px; }
.inl-diary .d-bar { margin-top: 10px; display: flex; align-items: center; gap: 12px; }
.inl-diary .d-bar { position: static; background: none; border: 0; padding: 4px 0 0; margin-top: 8px; }

/* кнопки белые: «Сохранить» и прочие; выбранная скорость у плеера — белая с абрикосовой обводкой */
.btn, .btn.ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line), var(--soft-shadow); }
.btn:hover, .btn.ghost:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--mid), var(--soft-shadow); }
.speed-btn.on { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px var(--mid); }
.inl-diary { background: var(--soft); }
@media (prefers-color-scheme: dark) {
  .btn, .btn.ghost, .btn:hover, .btn.ghost:hover, .speed-btn.on { background: var(--card); color: var(--ink); }
}
.df-h { white-space: pre-line; }
.df-h { padding-left: 0; border-left: 0; margin: 2px 0 8px; }

/* заполнено и сохранено — блок в уроке становится оливковым */
.inl-diary { transition: background .3s, border-color .3s; }
.inl-diary.done { background: #eaf0d4; border-color: #c9d6a1; }
.inl-diary.done .inl-h { color: #4f5f22; }
.inl-diary.done .inl-h::after { content: "✓ Заполнено"; margin-left: auto; font-size: .85rem; font-weight: 600; color: #5d6e2a; }
.inl-diary.done .btn { background: #c9d6a1; color: #2b3516; box-shadow: none; }
@media (prefers-color-scheme: dark) { .inl-diary.done { background: #2b3120; border-color: #4a5a2e; } .inl-diary.done .inl-h, .inl-diary.done .inl-h::after { color: #c6d691; } .inl-diary.done .btn { background: #b7c88a; color: #1f2810; } }

/* заголовки разделов и подзаголовки в уроке: оливковые */
.blk-sec { margin: 30px 0 12px; padding: 10px 16px; border-radius: 14px; background: #eaf0d4; color: #3f4d19; font-size: 1.15rem; }
.blk-sub { margin: 20px 0 8px; padding: 2px 0 2px 12px; border-left: 4px solid #b8c98a; color: #5d6e2a; font-size: 1.02rem; font-weight: 700; }
@media (prefers-color-scheme: dark) { .blk-sec { background: #2b3120; color: #c6d691; } .blk-sub { border-left-color: #6d7f3f; color: #c6d691; } }

/* карточки-памятки в уроке (непонимание / игнорирование речи) */
.sym-card { margin: 12px 0 18px; border-radius: 20px; background: #fffaf6; border: 1px solid #f0e0d2; overflow: hidden; }
.sym-card h4 { margin: 0; padding: 12px 18px; background: #f2d1b6; color: #3a2a1f; font-size: 1.02rem; letter-spacing: .02em; text-transform: uppercase; }
.sym-g { padding: 12px 18px 4px; }
.sym-g + .sym-g { border-top: 1px dashed #f0e0d2; }
.sym-t { display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 12px; border-radius: 999px; background: #f7e3d3; color: #8a5a35; margin-bottom: 6px; }
.sym-card ul { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 8px; }
.sym-card li { position: relative; padding-left: 20px; line-height: 1.45; }
.sym-card li::before { content: ""; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: #e0a36f; }
/* второй вариант — оливковый, чтобы карточки различались */
.sym-card.alt { background: #f6f9ea; border-color: #dfe6c4; }
.sym-card.alt h4 { background: #c9d6a1; color: #2b3516; }
.sym-card.alt .sym-t { background: #e8eed0; color: #4f5f22; }
.sym-card.alt li::before { background: #8fa14f; }
.sym-card.alt .sym-g + .sym-g { border-top-color: #dfe6c4; }
@media (prefers-color-scheme: dark) { .sym-card { background: #2a2420; border-color: #3b322c; } .sym-card h4 { background: #3d2e24; color: #f0b78e; } .sym-t { background: #33291f; color: #f0b78e; } .sym-card li::before { background: #d79b68; } }

/* группа блоков на едином фоне (метки @group:olive … @end) */
.grp { margin: 22px 0; padding: 14px 18px 6px; border-radius: 22px; }
.grp.olive { background: #eaf0d4; border: 1px solid #dfe6c4; }
.grp.olive .blk-sec { background: #d6e2b0; color: #2f3b15; margin: 6px 0 12px; }
.grp.olive .blk-sub { border-left-color: #8fa14f; }
.grp.olive .audio { background: #f6f9ea; }
.grp.olive .speed-btn.on { box-shadow: inset 0 0 0 2px #8fa14f; }
.grp.olive .pic img, .grp.olive figure img { border-radius: 16px; }
@media (prefers-color-scheme: dark) { .grp.olive { background: #2b3120; border-color: #3a4329; } .grp.olive .blk-sec { background: #3a4329; color: #c6d691; } .grp.olive .audio { background: #333b26; } }

/* крупный заголовок итогов дня */
.blk-day { margin: 40px 0 14px; font-size: 2rem; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: var(--ink); padding-bottom: 10px; border-bottom: 3px solid #c9d6a1; }
@media (max-width: 600px) { .blk-day { font-size: 1.55rem; } }
/* блок, помеченный @olive, — оливковый */
.tone-olive .audio { background: #eaf0d4; }
.tone-olive .speed-btn.on { box-shadow: inset 0 0 0 2px #8fa14f; }
@media (prefers-color-scheme: dark) { .tone-olive .audio { background: #2b3120; } }

/* жёлтая группа (метки @group:yellow … @end) */
.grp.yellow { background: #f8f4cf; border: 1px solid #ece6a8; }
.grp.yellow .audio { background: #fcfae6; }
.grp.yellow .blk-h { margin-top: 12px; color: #5c5319; }
.grp.yellow .speed-btn.on { box-shadow: inset 0 0 0 2px #c9b94a; }
@media (prefers-color-scheme: dark) { .grp.yellow { background: #38371f; border-color: #4a4828; } .grp.yellow .audio { background: #403f27; } .grp.yellow .blk-h { color: #e6d98a; } }

/* вопросы к уроку: автор с профилем, ответ текстом или голосом */
.qa .q-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qa .q-who { display: grid; line-height: 1.25; }
.q-aud { width: 100%; margin-top: 8px; }
.q-ans { align-items: flex-start; }
.q-mic { display: inline-flex; align-items: center; gap: 8px; }
.q-mic svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.q-mic.rec { box-shadow: inset 0 0 0 2px #c9564a; color: #a33a30; }
.q-mic.rec::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #c9564a; animation: qpulse 1s infinite; }
@keyframes qpulse { 50% { opacity: .25; } }

/* счётчик в меню: отдельно от названия, у правого края */
.nav-i > span { display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px; }
.nav-i .cnt { margin-left: auto; flex: none; }
.blk-day.mid { font-size: 1.4rem; margin-top: 28px; padding-bottom: 8px; border-bottom-width: 2px; }
.df-l + .df-h, .df-l + .df-h { margin-top: 8px; }

/* оформление подсказок дневника: задача, варианты, списки, колонки */
.df-h.rich { white-space: normal; color: var(--ink); font-size: .93rem; line-height: 1.5; margin: 8px 0 10px; }
.rich p { margin: 0 0 8px; }
.rich .r-h { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #8a5a35; margin: 14px 0 6px; }
.rich .r-ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; }
.rich .r-ul li { position: relative; padding-left: 18px; }
.rich .r-ul li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: #e0a36f; }
.rich .r-task { margin: 10px 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .72); border-left: 4px solid #8fa14f; }
.rich .r-task b { color: #4f5f22; }
.rich .r-v { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .72); }
.rich .r-dot { flex: none; width: 12px; height: 12px; margin-top: .42em; border-radius: 50%; background: #8fa14f; }
.rich .r-v.warn .r-dot { background: #e0a36f; } .rich .r-v.info .r-dot { background: #d4c24f; } .rich .r-v.no .r-dot { background: #d98a80; }
.rich .r-v.note { background: #eaf0d4; font-weight: 600; } .rich .r-v.note .r-dot { background: #5d6e2a; }
.rich .r-v.age { background: transparent; padding: 4px 0; color: var(--muted); font-size: .88rem; } .rich .r-v.age .r-dot { background: #c7b7a8; }
.rich .r-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 8px 0; }
.rich .r-col { padding: 4px 14px 10px; border-radius: 14px; background: rgba(255, 255, 255, .72); }
@media (prefers-color-scheme: dark) { .rich .r-task, .rich .r-v, .rich .r-col { background: rgba(255, 255, 255, .06); } .rich .r-h { color: #f0b78e; } .rich .r-v.note { background: #2b3120; } }

/* текстовые блоки урока в «карточной» разметке (@rich) */
.blk-rich { margin: 10px 0 14px; font-size: 1rem; line-height: 1.55; }
.blk-rich .r-task, .blk-rich .r-v { font-size: 1rem; }
.blk-rich .r-task { font-weight: 600; font-size: 1.05rem; }
.rich .r-step { display: flex; gap: 12px; align-items: center; margin: 6px 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .72); }
.rich .r-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #5d6e2a; color: #fff; font: 700 .85rem/1 inherit; font-style: normal; }
@media (prefers-color-scheme: dark) { .rich .r-step { background: rgba(255, 255, 255, .06); } .rich .r-n { background: #8fa14f; color: #1f2810; } }

/* тест «Да / Частично / Нет» с результатом */
.inl-score { margin: 14px 0 6px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .72); }
.sc-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.sc-cnt { color: var(--muted); font-size: .88rem; }
.sc-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: #efe3d7; }
.sc-bar i { display: block; height: 100%; width: 0; transition: width .3s; }
.sc-bar .y, .sc-legend .y::before { background: #8fa14f; } .sc-bar .p, .sc-legend .p::before { background: #e0b94f; } .sc-bar .n, .sc-legend .n::before { background: #d98a80; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: .9rem; }
.sc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sc-legend span::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.sc-msg { margin-top: 10px; padding: 12px 14px; border-radius: 14px; font-weight: 600; line-height: 1.45; }
.sc-msg.good { background: #e4edc8; color: #3f4d19; } .sc-msg.mid { background: #f7efc2; color: #5c5319; } .sc-msg.low { background: #f6dcd6; color: #7a3a31; }
.dchip input:checked + span { font-weight: 700; }
@media (prefers-color-scheme: dark) { .inl-score { background: rgba(255, 255, 255, .06); } .sc-bar { background: #3b322c; } .sc-msg.good { background: #2b3120; color: #c6d691; } .sc-msg.mid { background: #38371f; color: #e6d98a; } .sc-msg.low { background: #3a2b2a; color: #f0a999; } }

/* когда блок дневника заполнен и стал оливковым, плееры внутри тоже становятся салатовыми */
.inl-diary.done .audio { background: #f6f9ea; }
.inl-diary.done .speed-btn.on { box-shadow: inset 0 0 0 2px #8fa14f; }
.inl-diary.done .df-h.rich .r-task { border-left-color: #8fa14f; }
@media (prefers-color-scheme: dark) { .inl-diary.done .audio { background: #333b26; } }

/* липкая полоса «Заполнено N из M» */
.d-progress { position: sticky; z-index: 8; margin: 0 0 12px; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(10px); box-shadow: var(--soft-shadow); border: 1px solid var(--line); }
.d-progress .dp-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: .93rem; }
.d-progress .dp-s { color: var(--muted); font-size: .85rem; }
.d-progress .dp-bar { margin-top: 6px; height: 7px; border-radius: 999px; background: #efe3d7; overflow: hidden; }
.d-progress .dp-bar i { display: block; height: 100%; width: 0; background: #e0a36f; border-radius: 999px; transition: width .3s; }
.d-progress.full { background: #eaf0d4; border-color: #c9d6a1; } .d-progress.full .dp-bar i { background: #8fa14f; } .d-progress.full .dp-t { color: #3f4d19; }
/* шапка карточки не ломается на телефоне */
.inl-diary .inl-h { flex-wrap: wrap; gap: 4px 12px; }
.inl-diary.done .inl-h::after { white-space: nowrap; }
/* сворачиваемые описания */
.fold:not(.open) { max-height: 6.4em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.fold-btn { margin: -2px 0 10px; padding: 4px 14px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .8); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--ink); }
@media (prefers-color-scheme: dark) { .d-progress .dp-bar { background: #3b322c; } .d-progress.full { background: #2b3120; } .d-progress.full .dp-t { color: #c6d691; } .fold-btn { background: rgba(255, 255, 255, .08); } }
.rich .r-step { align-items: flex-start; } .rich .r-n { margin-top: 1px; }
.d-progress .dp-t { white-space: nowrap; } .d-progress .dp-top { flex-wrap: wrap; }
@media (max-width: 520px) { .d-progress { padding: 8px 12px; } .d-progress .dp-s { display: none; } }

/* видео без чёрных полос: вертикальные занимают всю ширину карточки, высота ограничена экраном */
.lesson-video { height: auto; max-height: 78vh; background: transparent; object-fit: contain; }
@media (max-width: 600px) { .lesson-video { max-height: 82vh; } }

/* полоса прогресса теперь прижата к низу экрана */
.d-progress { top: auto; bottom: 10px; margin: 14px 0 0; box-shadow: 0 6px 22px rgba(90, 60, 30, .18); }

/* «прокладка» между уроками: как вы себя чувствуете */
.ci { max-width: 560px; margin: 24px auto; padding: 28px 24px; text-align: center; }
.ci-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--soft); color: var(--accent); margin-bottom: 12px; }
.ci-ic .ic { width: 26px; height: 26px; }
.ci-q { font-size: 1.5rem; line-height: 1.25; margin: 0 0 8px; }
.ci-n { margin: 0 0 18px; }
.ci-opts { display: grid; gap: 12px; margin-top: 18px; }
.ci-b { font: inherit; font-size: 1.15rem; font-weight: 700; padding: 16px 20px; border: 0; border-radius: 999px; cursor: pointer; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 2px var(--line), var(--soft-shadow); transition: transform .12s, box-shadow .12s; }
.ci-b:hover { transform: translateY(-2px); }
.ci-b.good { box-shadow: inset 0 0 0 2px #8fa14f, var(--soft-shadow); } .ci-b.good:hover { background: #eaf0d4; }
.ci-b.ok { box-shadow: inset 0 0 0 2px #e0a36f, var(--soft-shadow); } .ci-b.ok:hover { background: #f7e3d3; }
.ci-b.bad { box-shadow: inset 0 0 0 2px #d98a80, var(--soft-shadow); } .ci-b.bad:hover { background: #f6dcd6; }
.ci-ans { display: inline-block; margin: 6px 0 14px; padding: 6px 18px; border-radius: 999px; font-weight: 700; }
.ci-ans.good { background: #eaf0d4; color: #3f4d19; } .ci-ans.ok { background: #f7e3d3; color: #7a4a24; } .ci-ans.bad { background: #f6dcd6; color: #7a3a31; }
.ci-msg { margin: 6px 0 18px; padding: 16px 18px; border-radius: 18px; text-align: left; line-height: 1.55; font-size: 1rem; }
.ci-msg.good { background: #f3f7e4; } .ci-msg.ok { background: #fbf1e8; } .ci-msg.bad { background: #fbeceA; border: 1px solid #f0cdc7; }
.ci-go { justify-content: center; }
.feel { display: inline-block; padding: 2px 12px; border-radius: 999px; font-weight: 700; font-size: .85rem; }
.feel.good { background: #eaf0d4; color: #3f4d19; } .feel.ok { background: #f7e3d3; color: #7a4a24; } .feel.bad { background: #f6dcd6; color: #7a3a31; }
@media (prefers-color-scheme: dark) { .ci-b { background: var(--card); } .ci-msg.good, .ci-msg.ok, .ci-msg.bad { background: rgba(255, 255, 255, .06); border-color: transparent; } }
.ci-sos { margin: 6px 0 18px; text-align: left; }
.ci-sos .blk-h { margin: 4px 0 8px; font-size: 1.05rem; }
.grp.hidden { display: none; }

/* =====================================================================
   Новый вид: собственный плеер и страница урока
   ===================================================================== */
.audio.ap { padding: 14px 16px 12px; border-radius: 22px; background: #f7f3ee; box-shadow: none; margin: 12px 0; }
.ap-title { display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.ap-title .ic { width: 1.1em; height: 1.1em; }
.ap audio { display: none; }
.ap-row { display: flex; align-items: center; gap: 12px; }
.ap-play { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: #f2d1b6; color: #3a2a1f; box-shadow: 0 4px 12px rgba(180, 110, 50, .22); transition: transform .12s, box-shadow .12s; }
.ap-play:hover { transform: scale(1.05); } .ap-play:active { transform: scale(.94); }
.ap-play svg { width: 20px; height: 20px; fill: currentColor; }
.ap-play .i-pause { display: none; } .ap.playing .ap-play .i-play { display: none; } .ap.playing .ap-play .i-pause { display: block; }
.ap-main { flex: 1; min-width: 0; }
.ap-bar { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.ap-bar::before { content: ""; position: absolute; left: 0; right: 0; height: 5px; border-radius: 999px; background: rgba(60, 40, 20, .12); }
.ap-fill { position: absolute; left: 0; height: 5px; width: 0; border-radius: 999px; background: #d9955a; }
.ap-knob { position: absolute; left: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); transform: scale(0); transition: transform .15s; }
.ap.playing .ap-knob, .ap-bar:hover .ap-knob, .ap-bar:focus-visible .ap-knob { transform: scale(1); }
.ap-times { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: -2px; }
.ap-rate, .ap-txt { flex: none; font: inherit; font-size: .85rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 0; cursor: pointer; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .1); min-width: 46px; }
.ap-rate:hover, .ap-txt:hover { box-shadow: inset 0 0 0 1px #d9955a; }
@media (max-width: 480px) { .ap-row:has(.ap-txt) { flex-wrap: wrap; } .ap-row:has(.ap-txt) .ap-main { order: 3; flex-basis: 100%; } .ap-row { gap: 10px; } .ap-play { width: 44px; height: 44px; } }
.grp.olive .ap-fill, .inl-diary.done .ap-fill { background: #8fa14f; } .grp.olive .ap-play, .inl-diary.done .ap-play { background: #c9d6a1; color: #2b3516; box-shadow: 0 4px 12px rgba(100, 120, 40, .25); }
.grp.yellow .ap-fill { background: #c9b94a; } .grp.yellow .ap-play { background: #efe3a0; color: #4d4413; box-shadow: 0 4px 12px rgba(150, 130, 30, .22); }
.tone-olive .ap-fill { background: #8fa14f; } .tone-olive .ap-play { background: #c9d6a1; color: #2b3516; }
.transcript { margin-top: 10px; }

/* ---- страница урока ---- */
.lp.lesson-page { width: 100%; max-width: 780px; margin-inline: auto; }
.lp .l-title { font-size: clamp(2rem, 6.4vw, 3.4rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; margin: 18px 0 30px; text-wrap: balance; }
.lp .l-body.card { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; margin: 0 0 8px; border-radius: 0; font-size: 1.0625rem; line-height: 1.65; }
.lp .blk-t, .lp .prose { max-width: 62ch; }
.lp .blk-day { font-size: clamp(1.75rem, 4.8vw, 2.6rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; border: 0; padding: 0; margin: 76px 0 22px; text-wrap: balance; }
.lp .blk-day.mid { font-size: clamp(1.35rem, 3.8vw, 1.75rem); margin-top: 56px; letter-spacing: -.025em; }
.lp .blk-sec { background: none; padding: 0; color: var(--ink); font-size: clamp(1.4rem, 4vw, 1.9rem); letter-spacing: -.028em; margin: 56px 0 14px; }
.lp .blk-sub { border: 0; padding: 0; color: #6f7f33; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin: 44px 0 10px; }
.lp .blk-h { font-size: 1.2rem; letter-spacing: -.02em; margin: 24px 0 8px; }
.lp .lesson-video { border-radius: 26px; margin: 16px 0; box-shadow: 0 14px 36px rgba(40, 30, 20, .16); background: #000; }
.lp .grp { border: 0; border-radius: 34px; padding: 26px; margin: 28px 0; box-shadow: none; }
.lp .grp.olive { background: #f3f7e6; } .lp .grp.yellow { background: #fcf9e3; }
.lp .grp .audio.ap { background: #fff; box-shadow: 0 1px 2px rgba(60, 50, 30, .04), 0 8px 22px rgba(60, 50, 30, .07); }
.lp .grp .blk-sec, .lp .grp .blk-h { margin-top: 0; }
.lp .inl-diary { background: #fff5ec; border: 0; border-radius: 34px; padding: 28px 26px; margin: 30px 0; box-shadow: none; }
.lp .inl-diary.done { background: #f1f6e2; border: 0; }
.lp .inl-diary .inl-h { font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: #a06b3a; margin-bottom: 14px; }
.lp .inl-diary.done .inl-h { color: #5d6e2a; }
.lp .inl-diary .audio.ap { background: #fff; box-shadow: 0 1px 2px rgba(60, 50, 30, .04), 0 8px 22px rgba(60, 50, 30, .07); }
.lp .df-l { font-size: 1.3rem; line-height: 1.3; letter-spacing: -.022em; font-weight: 700; margin: 8px 0 6px; }
.lp .df textarea { background: #fff; border: 1px solid rgba(60, 40, 20, .08); border-radius: 20px; padding: 15px 18px; font-size: 1rem; min-height: 100px; box-shadow: 0 1px 2px rgba(60, 40, 20, .04); }
.lp .df textarea:focus { outline: none; border-color: #e0a36f; box-shadow: 0 0 0 4px rgba(224, 163, 111, .22); }
.lp .inl-diary.done .df textarea:focus { border-color: #8fa14f; box-shadow: 0 0 0 4px rgba(143, 161, 79, .22); }
.lp .rich .r-task, .lp .rich .r-v, .lp .rich .r-col, .lp .rich .r-step, .lp .inl-score { background: #fff; border-radius: 20px; box-shadow: 0 1px 2px rgba(60, 50, 30, .04), 0 6px 16px rgba(60, 50, 30, .05); }
.lp .rich .r-v.note { background: #eef3dc; box-shadow: none; }
.lp .rich .r-v.age { background: transparent; box-shadow: none; }
.lp .df-h.rich { color: var(--ink); }
.lp .d-progress { width: min(440px, calc(100% - 24px)); margin: 16px auto 0; padding: 11px 20px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5); box-shadow: 0 10px 34px rgba(40, 30, 20, .18), 0 0 0 1px rgba(0, 0, 0, .05); }
.lp .d-progress.full { background: rgba(238, 245, 215, .82); }
.lp [data-pane="q"].card { background: transparent; border: 0; box-shadow: none; backdrop-filter: none; padding: 0; margin-top: 72px; }
.lp [data-pane="q"] .ask h3 { font-size: clamp(1.5rem, 4.4vw, 2rem); letter-spacing: -.03em; }
.lp .ask textarea { border-radius: 20px; padding: 15px 18px; }
@media (prefers-reduced-motion: no-preference) {
  .lp .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .lp .rv.in { opacity: 1; transform: none; }
}
@media (max-width: 600px) { .lp .grp, .lp .inl-diary { border-radius: 28px; padding: 20px 16px; margin-inline: -4px; } }
@media (prefers-color-scheme: dark) {
  .audio.ap { background: rgba(255, 255, 255, .06); } .ap-rate, .ap-txt { background: rgba(255, 255, 255, .1); color: var(--ink); box-shadow: none; } .ap-bar::before { background: rgba(255, 255, 255, .16); }
  .lp .grp.olive, .lp .inl-diary.done { background: #272d1d; } .lp .grp.yellow { background: #34331d; } .lp .inl-diary { background: #302720; }
  .lp .grp .audio.ap, .lp .inl-diary .audio.ap, .lp .df textarea, .lp .rich .r-task, .lp .rich .r-v, .lp .rich .r-col, .lp .rich .r-step, .lp .inl-score { background: rgba(255, 255, 255, .07); box-shadow: none; border-color: rgba(255, 255, 255, .08); }
  .lp .d-progress { background: rgba(40, 34, 30, .78); box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .08); }
}

/* =====================================================================
   Тема «дымчатый перламутр»: светлый серо-лавандовый, тёмно-сланцевый
   текст, очень лёгкие крупные шрифты, круглые карточки без теней
   ===================================================================== */
.lp {
  --ink: #3a3a50; --muted: #7b7b95; --slate: #3e3e54; --line: #e1e0ef;
  --tile: #e7e6f5; --tile2: #f4f3fa; --rose: #f8e6ec; --mint: #e4f1ea;
  color: var(--ink);
}
.lp .ln-row b { border: 1px solid var(--slate); border-radius: 999px; padding: 5px 16px; font-size: .8rem; font-weight: 500; letter-spacing: .02em; color: var(--slate); background: transparent; }
.lp .ln-line { background: var(--line); }
.lp .ln-arr { background: var(--tile); color: var(--slate); box-shadow: none; }
.lp .ln-titles a { color: var(--muted); }
.lp .l-title { font-family: "Manrope", var(--font-ui); font-weight: 300; letter-spacing: -.045em; line-height: .98; font-size: clamp(2.3rem, 8.4vw, 4.9rem); margin: 22px 0 34px; text-wrap: balance; }
.lp .l-body.card, .lp .l-body { color: var(--ink); }
.lp .blk-day, .lp .blk-day.mid { font-family: "Manrope", var(--font-ui); font-weight: 300; letter-spacing: -.04em; line-height: 1.02; font-size: clamp(2rem, 6.4vw, 3.5rem); margin: 84px 0 24px; }
.lp .blk-day.mid { font-size: clamp(1.5rem, 4.6vw, 2.1rem); margin-top: 60px; letter-spacing: -.03em; }
.lp .blk-sec { color: var(--ink); font-weight: 400; font-size: clamp(1.5rem, 4.4vw, 2.2rem); letter-spacing: -.035em; }
.lp .blk-sub { color: var(--muted); border: 0; font-weight: 600; }
.lp .blk-h { font-weight: 500; letter-spacing: -.02em; }
.lp .lesson-video { border-radius: 30px; box-shadow: none; }
.lp .grp { border: 0; border-radius: 34px; box-shadow: none; }
.lp .grp.olive { background: var(--tile2); box-shadow: inset 0 0 0 1px var(--line); }
.lp .grp.yellow { background: var(--rose); }
.lp .inl-diary { background: var(--tile); border-radius: 34px; }
.lp .inl-diary.done { background: var(--mint); }
.lp .inl-diary .inl-h { color: var(--muted); font-weight: 600; }
.lp .inl-diary.done .inl-h, .lp .inl-diary.done .inl-h::after { color: #3d7a5a; }
.lp .df-l { font-weight: 500; letter-spacing: -.025em; }
.lp .df textarea { background: #fff; border: 1px solid var(--line); box-shadow: none; }
.lp .df textarea:focus, .lp .inl-diary.done .df textarea:focus { border-color: var(--slate); box-shadow: 0 0 0 4px rgba(62, 62, 84, .1); }
.lp .rich .r-task, .lp .rich .r-v, .lp .rich .r-col, .lp .inl-score { background: #fff; box-shadow: none; border: 1px solid var(--line); }
.lp .rich .r-task { border-left: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--slate); }
.lp .rich .r-v.note { background: var(--tile2); border-color: transparent; }
.lp .rich .r-h { color: var(--muted); }
.lp .rich .r-ul li::before { background: var(--slate); }
.lp .rich .r-dot { background: var(--slate); }
.lp .rich .r-v.ok .r-dot { background: #5fae88; } .lp .rich .r-v.warn .r-dot { background: #e6a07a; } .lp .rich .r-v.info .r-dot { background: #b7a8ea; } .lp .rich .r-v.no .r-dot { background: #e08aa0; }
/* шаги плана — пронумерованные строки: 01/ 02/ */
.lp .blk-rich .r-step { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 16px 4px; gap: 22px; align-items: baseline; margin: 0; }
.lp .blk-rich .r-step:last-of-type { border-bottom: 1px solid var(--line); }
.lp .blk-rich .r-n { background: none; color: var(--muted); width: auto; height: auto; font-size: .9rem; font-weight: 500; margin: 0; }
.lp .blk-rich .r-n::after { content: "/"; }
.lp .rich .r-step { background: #fff; border: 1px solid var(--line); box-shadow: none; }
.lp .rich .r-n { background: var(--slate); color: #fff; }
/* плеер */
.lp .audio.ap, .lp .grp .audio.ap, .lp .inl-diary .audio.ap { background: #fff; box-shadow: none; border: 1px solid var(--line); }
.lp .ap-title { color: var(--muted); }
.lp .ap-play, .lp .grp.olive .ap-play, .lp .grp.yellow .ap-play, .lp .inl-diary.done .ap-play, .lp .tone-olive .ap-play { background: var(--slate); color: #fff; box-shadow: none; }
.lp .ap-fill, .lp .grp.olive .ap-fill, .lp .grp.yellow .ap-fill, .lp .inl-diary.done .ap-fill, .lp .tone-olive .ap-fill { background: var(--slate); }
.lp .ap-bar::before { background: var(--tile); }
.lp .ap-rate, .lp .ap-txt { background: transparent; box-shadow: inset 0 0 0 1px var(--slate); color: var(--slate); }
.lp .ap-rate:hover, .lp .ap-txt:hover { background: var(--slate); color: #fff; box-shadow: inset 0 0 0 1px var(--slate); }
/* кнопки: тонкая таблетка, при наведении заливка */
.lp .btn, .lp .btn.ghost { background: transparent; color: var(--slate); box-shadow: inset 0 0 0 1px var(--slate); border-radius: 999px; font-weight: 500; }
.lp .btn:hover, .lp .btn.ghost:hover { background: var(--slate); color: #fff; box-shadow: inset 0 0 0 1px var(--slate); }
.lp .btn.lock { opacity: .4; }
.lp .d-progress { background: rgba(247, 246, 252, .82); box-shadow: 0 10px 34px rgba(62, 62, 84, .16), 0 0 0 1px var(--line); }
.lp .d-progress .dp-bar { background: var(--tile); } .lp .d-progress .dp-bar i, .lp .d-progress.full .dp-bar i { background: var(--slate); }
.lp .d-progress.full { background: rgba(228, 241, 234, .86); } .lp .d-progress.full .dp-t { color: #2f6b4c; }
.lp .fold-btn { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.lp .ask .qa, .lp .qa { border-radius: 24px; }
@media (prefers-color-scheme: dark) {
  .lp { --ink: #ecebf7; --muted: #a3a2c0; --slate: #cfcdf0; --line: #3a3956; --tile: #2a2940; --tile2: #23223a; --rose: #36283a; --mint: #243a30; }
  .lp .grp.olive { background: var(--tile2); } .lp .inl-diary { background: var(--tile); } .lp .inl-diary.done { background: var(--mint); }
  .lp .df textarea, .lp .audio.ap, .lp .grp .audio.ap, .lp .inl-diary .audio.ap, .lp .rich .r-task, .lp .rich .r-v, .lp .rich .r-col, .lp .rich .r-step, .lp .inl-score { background: rgba(255, 255, 255, .06); }
  .lp .ap-play, .lp .rich .r-n { color: #23223a; } .lp .btn:hover, .lp .ap-rate:hover { color: #23223a; }
  .lp .d-progress { background: rgba(35, 34, 58, .82); }
}
.lp .blk-rich.rich .r-step { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 16px 4px; gap: 22px; align-items: baseline; margin: 0; }
.lp .blk-rich.rich .r-step:last-of-type { border-bottom: 1px solid var(--line); }
.lp .blk-rich.rich .r-n { display: inline-block; background: none; color: var(--muted); width: auto; height: auto; min-width: 2.2em; font-size: .9rem; font-weight: 500; margin: 0; }
.lp .grp.yellow .blk-h, .lp .grp.olive .blk-h { color: var(--ink); }
.lp .grp.olive .blk-sec, .lp .grp .blk-sec { color: var(--ink); background: none; }

/* единый стиль строк: важное, варианты, шаги, как «01/ 02/» — тонкие линии вместо коробок */
.lp .rich .r-task { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 6px 0 20px; font-weight: 400; font-size: 1.05rem; line-height: 1.5; letter-spacing: -.01em; }
.lp .rich .r-task b { font-weight: 600; }
.lp .blk-rich.rich .r-task { font-size: clamp(1.35rem, 3.6vw, 1.75rem); line-height: 1.3; letter-spacing: -.025em; font-weight: 300; padding: 4px 0 26px; }
.lp .blk-rich.rich .r-task::first-line { font-weight: 500; }
.lp .rich .r-v, .lp .rich .r-v.note, .lp .rich .r-v.age { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 15px 4px; margin: 0; gap: 22px; align-items: baseline; font-size: 1rem; font-weight: 400; }
.lp .rich .r-v:not(:has(+ .r-v)) { border-bottom: 1px solid var(--line); }
.lp .rich .r-v .r-dot { width: 9px; height: 9px; margin: 0 .55em 0 .75em; flex: none; transform: translateY(-.05em); }
.lp .rich .r-v.note { color: var(--muted); font-weight: 500; }
.lp .rich .r-v.age { border-bottom: 0; color: var(--muted); font-size: .92rem; }
.lp .rich .r-step:not(:has(+ .r-step)) { border-bottom: 1px solid var(--line); }
.lp .rich .r-col { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 4px 4px 10px; }
@media (max-width: 520px) { .lp .rich .r-v { gap: 12px; } .lp .rich .r-v .r-dot { margin-left: .25em; } }
/* варианты и пометки: одна спокойная точка вместо радуги */
.lp .rich .r-v .r-dot, .lp .rich .r-v.ok .r-dot, .lp .rich .r-v.warn .r-dot, .lp .rich .r-v.info .r-dot, .lp .rich .r-v.no .r-dot, .lp .rich .r-v.note .r-dot { background: var(--slate); width: 7px; height: 7px; opacity: .55; }

/* поля дневника: один спокойный ритм — вопрос, пояснение, поле */
.lp .inl-diary .df { padding: 22px 0 6px; margin: 0; border-top: 1px solid rgba(62, 62, 84, .1); }
.lp .inl-diary .inl-h + .df, .lp .inl-diary .df:first-of-type { border-top: 0; padding-top: 6px; }
.lp .df-l { font-size: 1.08rem; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; margin: 0 0 6px; }
.lp .df-h.rich { font-size: .9rem; line-height: 1.5; color: var(--muted); margin: 0 0 12px; }
.lp .df-h.rich p { margin: 0 0 6px; }
.lp .df-h.rich .r-ul li, .lp .df-h.rich .r-v, .lp .df-h.rich .r-step { font-size: .95rem; color: var(--ink); }
.lp .df-h.rich .r-task { font-size: .98rem; color: var(--ink); padding-bottom: 12px; }
.lp .df-h.rich .r-h { margin: 12px 0 6px; }
.lp .df textarea { min-height: 76px; padding: 13px 16px; font-size: 1rem; line-height: 1.5; border-radius: 18px; }
.lp .df textarea::placeholder { color: #a3a3b8; font-size: .95rem; }
.lp .dchip span { font-size: .95rem; }
@media (prefers-color-scheme: dark) { .lp .df textarea::placeholder { color: #7f7e9c; } .lp .inl-diary .df { border-top-color: rgba(255, 255, 255, .1); } }

/* подсказки внутри теста: компактно и в одном стиле */
.lp .df-h.rich .r-v, .lp .df-h.rich .r-v.note, .lp .df-h.rich .r-v.age { border: 0; padding: 2px 0 8px; gap: 10px; font-size: .9rem; color: var(--muted); font-weight: 400; align-items: baseline; }
.lp .df-h.rich .r-v:not(:has(+ .r-v)) { border-bottom: 0; }
.lp .df-h.rich .r-v .r-dot { margin: 0 2px 0 0; width: 6px; height: 6px; }
.lp .df-h.rich .r-ul { gap: 6px; margin: 0 0 8px; }
.lp .df-h.rich .r-ul li { padding-left: 18px; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.lp .df-h.rich .r-ul li::before { width: 5px; height: 5px; left: 4px; top: .66em; background: var(--slate); opacity: .5; }
.lp .rich .r-task b { color: var(--ink); }
.lp .df-h.rich .r-task { padding: 6px 0 14px; }
.lp .df-h.rich .r-h { margin: 14px 0 8px; font-size: .72rem; }
.lp .lesson-video { background: transparent; }
.lp .lesson-video.portrait { width: auto; max-width: 100%; display: block; margin-inline: auto; }
@media (max-width: 600px) { .lp .lesson-video.portrait { width: 100%; } }

/* =====================================================================
   Тема v3 «дымчатый перламутр» — на весь сайт
   ===================================================================== */
:root {
  --bg: #ffffff; --card: #ffffff; --ink: #3a3a50; --muted: #7b7b95; --line: #e1e0ef;
  --brand: #3e3e54; --brand-ink: #ffffff; --accent: #3e3e54; --soft: #e7e6f5; --danger: #c4506a;
  --peach: #f4f3fa; --mint: #e4f1ea; --sky: #e7e6f5; --rose: #f8e6ec; --lime: #f4f3fa; --mid: #a9a8c8;
  --dark: #3e3e54; --dark-ink: #ffffff; --dark-hover: #2d2d40; --sel: #e7e6f5;
  --shadow: 0 1px 2px rgba(62, 62, 84, .04); --soft-shadow: 0 1px 2px rgba(62, 62, 84, .05);
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head: "Manrope", system-ui, sans-serif;
  --tile: #e7e6f5; --tile2: #f4f3fa;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17162a; --card: #211f38; --ink: #ecebf7; --muted: #a3a2c0; --line: #36345a;
    --brand: #cfcdf0; --brand-ink: #1b1a2c; --accent: #cfcdf0; --soft: #2b2a46; --danger: #f08aa0;
    --peach: #23223a; --mint: #243a30; --sky: #2b2a46; --rose: #36283a; --lime: #23223a; --mid: #7f7ea8;
    --dark: #cfcdf0; --dark-ink: #1b1a2c; --dark-hover: #e0def8; --sel: #2b2a46;
    --tile: #2b2a46; --tile2: #23223a;
  }
}
@media not (prefers-color-scheme: dark) { :root { --bg: #ffffff; --card: #ffffff; --line: #e1e0ef; --shadow: 0 1px 2px rgba(62, 62, 84, .04); --soft-shadow: 0 1px 2px rgba(62, 62, 84, .05); } body { background: #ffffff; } }
body { font-family: var(--font-ui); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1 { font-family: var(--font-head); font-weight: 300; font-size: clamp(2rem, 5.6vw, 3.3rem); letter-spacing: -.04em; line-height: 1.02; margin: 4px 0 22px; text-wrap: balance; }
h2 { font-weight: 400; letter-spacing: -.03em; }
h3 { font-weight: 500; letter-spacing: -.015em; }
.top { background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { .top { background: rgba(23, 22, 42, .82); } }
.brand .logo { background: var(--tile); color: var(--brand); }
.search input[type=search] { background: var(--tile2); border: 0; box-shadow: none; }
.search input[type=search]:focus { box-shadow: 0 0 0 3px rgba(62, 62, 84, .12); outline: none; }
.nav-i { border-radius: 16px; color: var(--ink); }
.nav-i:hover { background: var(--tile2); }
.nav-i.on { background: var(--tile); color: var(--brand); font-weight: 600; box-shadow: none; }
.nav-i.on svg { stroke: var(--brand); }
.side-h { color: var(--muted); }
.s-room .dot, .avatar { background: var(--tile); color: var(--brand); }
.s-room.on { background: var(--tile2); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 28px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn, .btn.ghost { background: transparent; color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); border: 0; border-radius: 999px; font-weight: 500; }
.btn:hover, .btn.ghost:hover { background: var(--brand); color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand); }
.btn.danger, .link.danger { color: var(--danger); }
.btn.lock { opacity: .4; }
.chip, .tabs a { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); border: 0; border-radius: 999px; }
.chip:hover, .tabs a:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.chip.on, .tabs a.on { background: var(--tile); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); font-weight: 600; }
.badge, .pill { background: var(--tile); color: var(--brand); box-shadow: none; }
.notice { background: var(--tile2); color: var(--ink); border-radius: 22px; border: 0; }
input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range]), textarea, select { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
@media (prefers-color-scheme: dark) { input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range]), textarea, select { background: rgba(255, 255, 255, .06); } }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(62, 62, 84, .1); }
.pop { border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(62, 62, 84, .14); }
.toast { background: var(--brand); color: var(--brand-ink); border-radius: 999px; }
a { color: var(--brand); }
.muted { color: var(--muted); }
/* перламутровые шары на главной: сиреневый, розовый, голубой */
.hero2 { background: linear-gradient(120deg, #fff 35%, #f4f3fa 100%); border: 1px solid var(--line); }
.orbs i { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85), inset 8px 8px 30px rgba(255, 255, 255, .6), 0 20px 50px rgba(120, 110, 190, .16); }
.orbs i:nth-child(1) { background: linear-gradient(135deg, #f6dbe8, #d9d3f7 75%, rgba(255, 255, 255, .3)); }
.orbs i:nth-child(2) { background: linear-gradient(150deg, rgba(214, 230, 255, .95), rgba(244, 243, 250, .6)); }
.orbs i:nth-child(3) { background: linear-gradient(160deg, rgba(196, 190, 240, .85), rgba(231, 230, 245, .55)); }
@media (prefers-color-scheme: dark) { .hero2 { background: linear-gradient(120deg, #211f38 35%, #2b2a46 100%); } }
/* цветные плашки и номера: в дымчатой гамме */
.ico-chip.c1, .lcard .num, .lessons .lcard:nth-child(n) .num { background: var(--tile); color: var(--brand); }
.ico-chip.c2, .lessons .lcard:nth-child(4n+2) .num { background: #f1eef9; color: var(--brand); }
.ico-chip.c3, .lessons .lcard:nth-child(4n+3) .num { background: var(--tile2); color: var(--brand); }
.ico-chip.c4, .lessons .lcard:nth-child(4n) .num { background: #eaf1fb; color: var(--brand); }
.ico-chip.c5 { background: var(--rose); color: #9a4a66; }
.st.done .st-n { background: var(--mint); color: #3d7a5a; }
.lcard { border: 1px solid var(--line); box-shadow: none; }
.lcard:hover { box-shadow: none; border-color: var(--brand); transform: none; }
.lcard:hover .lc-go, .course-card:hover .arrow-btn { background: var(--brand); color: var(--brand-ink); }
.badge.warn { background: var(--rose); color: #9a4a66; }
.s-room .dot, .avatar-btn { background: var(--tile); color: var(--brand); }
.audio { background: #f7f6fb; }
.video-ph { background: var(--tile2); }
.ask-cta { background: var(--tile2); border-radius: 22px; }
.d-sep { background: var(--tile2); }
.path { background: var(--tile2); } .path.mine { background: var(--brand); color: var(--brand-ink); }
.speed-btn, .ltabs button { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.ltabs button.on, .speed-btn.on { background: var(--tile); color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
@media (prefers-color-scheme: dark) { .ico-chip.c1, .lcard .num, .ico-chip.c2, .ico-chip.c3, .ico-chip.c4 { color: var(--brand); } .audio { background: rgba(255, 255, 255, .06); } .ico-chip.c2, .lessons .lcard:nth-child(4n+2) .num, .lessons .lcard:nth-child(4n) .num { background: var(--tile2); } }
.card h1, .row h1, .qcard h1 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); letter-spacing: -.03em; margin: 0; }
.card h2 { font-size: 1.35rem; margin: 0 0 8px; }
.card.auth { max-width: 440px; margin: 32px auto; padding: 30px 28px; border-radius: 32px; }
.auth .tabs { margin-bottom: 18px; }
.auth label { font-size: .85rem; color: var(--muted); font-weight: 500; }
.auth input { padding: 13px 16px; font-size: 1rem; }
.auth form .btn, .auth .btn { width: 100%; padding: 14px 20px; font-size: 1rem; margin-top: 8px; }

/* фото курсов: мягкий перламутровый фильтр — теплота остаётся, но снимки «дружат» с холодной гаммой сайта */
.c-art.has-img img { filter: saturate(.9) contrast(1.02) brightness(1.02); }
.c-art.has-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(150deg, rgba(176, 170, 238, .55) 0%, rgba(214, 230, 255, .35) 45%, rgba(246, 198, 218, .38) 100%); mix-blend-mode: soft-light; }
.c-art .c-age { z-index: 2; }
.course-card.locked .c-art.has-img { filter: saturate(.6); }
@media (prefers-color-scheme: dark) { .c-art.has-img::after { opacity: .7; } }
.c-art.has-img::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(160deg, rgba(196, 190, 245, .26), rgba(236, 214, 240, .14)); mix-blend-mode: multiply; }
.c-art.has-img img { filter: saturate(.86) contrast(1.03) brightness(1.03); }

/* =====================================================================
   Анкета ребёнка
   ===================================================================== */
.an-lead { max-width: 62ch; color: var(--muted); margin: 0 0 22px; line-height: 1.6; }
.an-prog { position: sticky; top: 62px; z-index: 6; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 12px 0 10px; margin: 0 0 18px; border-bottom: 1px solid var(--line); }
.an-steps { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.an-steps::-webkit-scrollbar { display: none; }
.an-step { flex: none; display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .88rem; font-weight: 500; padding: 7px 14px 7px 8px; border-radius: 999px; border: 0; cursor: pointer; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.an-step b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tile2); font-size: .8rem; font-weight: 600; }
.an-step.on { background: var(--tile); box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); }
.an-step.on b { background: var(--brand); color: #fff; }
.an-step.done:not(.on) b { background: var(--mint); color: #2f6b4c; }
.an-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: .88rem; margin: 2px 0 6px; }
.an-bar { height: 6px; border-radius: 999px; background: var(--tile); overflow: hidden; }
.an-bar i { display: block; height: 100%; width: 0; background: var(--brand); border-radius: 999px; transition: width .3s; }
.an-form { max-width: 720px; }
.an-h { font-size: clamp(1.4rem, 3.6vw, 2rem); font-weight: 300; letter-spacing: -.035em; margin: 8px 0 20px; }
.an-f { padding: 20px 0 6px; border-top: 1px solid var(--line); }
.an-f:first-of-type { border-top: 0; padding-top: 4px; }
.an-f .df-l { font-size: 1.06rem; font-weight: 500; line-height: 1.4; margin: 0 0 6px; }
.an-opt { font-size: .74rem; font-weight: 500; color: var(--muted); background: var(--tile2); border-radius: 999px; padding: 2px 10px; margin-left: 6px; vertical-align: 2px; }
.an-f input[type=text], .an-f textarea { width: 100%; padding: 13px 16px; font-size: 1rem; border-radius: 16px; }
.an-f textarea { min-height: 84px; }
.an-f .df-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.an-f .dchip span { display: inline-block; padding: 9px 16px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); font-size: .95rem; cursor: pointer; transition: background .15s, box-shadow .15s; }
.an-f .dchip input { position: absolute; opacity: 0; pointer-events: none; }
.an-f .dchip input:checked + span { background: var(--tile); box-shadow: inset 0 0 0 1.5px var(--brand); font-weight: 600; color: var(--brand); }
.an-f .dchip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(62, 62, 84, .18), inset 0 0 0 1px var(--brand); }
.an-note { display: block; margin-top: 6px; }
.an-note span { display: block; font-size: .85rem; color: var(--muted); margin: 0 0 4px; }
.an-dk { margin: 8px 0 0; padding: 4px 12px; border-radius: 999px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: inherit; font-size: .82rem; cursor: pointer; }
.an-dk:hover { box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); }
.an-f.bad { border-radius: 18px; background: #fbeef1; box-shadow: 0 0 0 8px #fbeef1; margin: 8px 0; }
.an-f.bad .df-l { color: #a23a55; }
.an-nav { display: flex; gap: 10px; justify-content: flex-end; margin: 28px 0 10px; }
.an-nav .btn { padding: 12px 26px; font-size: 1rem; }
.an-who { margin: 8px 0 22px; padding: 16px 20px; border-radius: 24px; background: var(--tile2); align-items: center; }
.an-view { margin: 0 0 28px; }
.an-view h2 { font-size: 1.5rem; font-weight: 300; letter-spacing: -.03em; margin: 28px 0 8px; }
.an-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.an-row:last-child { border-bottom: 1px solid var(--line); }
.an-q { color: var(--muted); font-size: .95rem; line-height: 1.45; }
.an-a { line-height: 1.5; }
@media (max-width: 600px) { .an-row { grid-template-columns: 1fr; gap: 4px; } .an-prog { top: 0; } .an-nav .btn { flex: 1; } }
@media (prefers-color-scheme: dark) { .an-prog { background: rgba(23, 22, 42, .88); } .an-f.bad { background: #3a2530; box-shadow: 0 0 0 8px #3a2530; } .an-f.bad .df-l { color: #f0a0b4; } }
/* шапка профиля: круг, имя и роль выровнены по центру круга, роль встаёт под именем слева */
.uc-head { display: flex; align-items: center; gap: 20px; }
.uc-who { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; min-width: 0; }
.uc-who h1 { margin: 0; line-height: 1.1; overflow-wrap: anywhere; }
.badge.uc-role { margin: 0; padding: 5px 16px; font-size: .88rem; font-weight: 500; line-height: 1.3; }
@media (max-width: 520px) { .uc-head { gap: 14px; } }

/* лента: круг, имя и роль или данные о ребёнке выровнены по центру круга, роль под именем слева */
.post .head { align-items: center; }
.post .head .avatar { width: 46px; height: 46px; flex: none; }
.post .who-col { gap: 3px; justify-content: center; }
.post .who-col .badge { margin: 0; padding: 3px 12px; font-size: .78rem; font-weight: 500; line-height: 1.3; }
.post .who-col a { line-height: 1.2; }
@media (max-width: 760px) {
  .post .head { flex-wrap: nowrap; align-items: center; }
  .post .who-col { display: flex; }
  .post .who-col > :first-child { flex: initial; align-self: flex-start; }
  .post .child-line { order: 0; flex-basis: auto; margin-left: 0; }
  .post-date { order: 0; max-width: 34%; margin-left: auto; align-self: flex-start; }
}
.post .who-col .badge { white-space: nowrap; }
@media (max-width: 760px) { .post .who-col { flex: 1; min-width: 0; } .post-date { max-width: 26%; font-size: .74rem; } }
.an-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; }
.an-qc { font: inherit; font-size: .84rem; padding: 6px 13px; border-radius: 999px; border: 0; cursor: pointer; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: background .15s, box-shadow .15s; }
.an-qc:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.an-qc.on { background: var(--tile); color: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); font-weight: 600; }

/* =====================================================================
   Главная: «следующий шаг», нижнее меню на телефоне
   ===================================================================== */
.next { background: var(--tile); border-radius: 34px; padding: 30px 28px; margin: 0 0 18px; }
.next-k { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.next h2 { font-family: var(--font-head); font-weight: 300; font-size: clamp(1.7rem, 5.4vw, 2.6rem); letter-spacing: -.04em; line-height: 1.05; margin: 0 0 10px; text-wrap: balance; }
.next p { margin: 0 0 20px; color: var(--muted); max-width: 52ch; }
.next .row { align-items: center; gap: 18px; }
.next .btn { padding: 13px 30px; font-size: 1.02rem; background: var(--brand); color: var(--brand-ink); box-shadow: none; }
.next .btn:hover { background: var(--dark-hover); }
.next-l { color: var(--brand); font-weight: 500; text-underline-offset: 3px; }
@media (max-width: 760px) {
  body.is-mom #nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; flex-direction: row; justify-content: space-around; gap: 0; overflow: visible;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--line); }
  body.is-mom #nav .nav-i { flex: 1; flex-direction: column; gap: 3px; padding: 8px 2px 6px; font-size: .7rem; border-radius: 14px; white-space: normal; text-align: center; min-width: 0; }
  body.is-mom #nav .nav-i > span { flex: none; justify-content: center; font-size: .7rem; }
  body.is-mom #nav .nav-i svg { width: 23px; height: 23px; }
  body.is-mom #nav .nav-i.sec { display: none; }
  body.is-mom main#app { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
  body.is-mom .lp .d-progress { bottom: calc(78px + env(safe-area-inset-bottom)); }
  body.is-mom .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .next { padding: 24px 20px; border-radius: 28px; }
}
@media (prefers-color-scheme: dark) { @media (max-width: 760px) { body.is-mom #nav { background: rgba(23, 22, 42, .92); } } }

/* закреплённое сообщение Светланы на главной */
.pinned { background: var(--tile2); border: 1px solid var(--line); border-radius: 30px; margin: 0 0 18px; overflow: hidden; }
.pinned summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 18px 22px; }
.pinned summary::-webkit-details-marker { display: none; }
.pin-k { display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); flex: none; }
.pin-k .ic { width: 1.1em; height: 1.1em; }
.pin-t { font-weight: 500; font-size: 1.08rem; letter-spacing: -.01em; flex: 1; min-width: 0; }
.pin-go { flex: none; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); position: relative; }
.pin-go::after { content: ""; position: absolute; left: 9px; top: 9px; width: 7px; height: 7px; border-right: 1.5px solid var(--brand); border-bottom: 1.5px solid var(--brand); transform: rotate(45deg); transition: transform .2s; }
.pinned[open] .pin-go::after { transform: rotate(-135deg); top: 12px; }
.pin-body { padding: 0 22px 22px; }
.pin-who { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.pin-who .avatar { width: 46px; height: 46px; }
.pin-who .who-col { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.pin-who .badge { margin: 0; padding: 3px 12px; font-size: .78rem; white-space: nowrap; }
.pin-rich { font-size: 1rem; line-height: 1.6; max-width: 66ch; }
.pin-rich .r-h { margin: 18px 0 6px; }
.pin-rich .r-step { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 12px 2px; gap: 18px; align-items: baseline; margin: 0; }
.pin-rich .r-step:not(:has(+ .r-step)) { border-bottom: 1px solid var(--line); }
.pin-rich .r-n { background: none; color: var(--muted); width: auto; height: auto; min-width: 2.2em; font-size: .9rem; margin: 0; }
.pin-rich .r-n::after { content: "/"; }
.pin-rich .r-ul li { padding: 3px 0 3px 18px; }
.pin-rich .r-v { border: 0; background: #fff; border-radius: 18px; padding: 12px 16px; margin-top: 14px; }
.pin-rich .r-v:not(:has(+ .r-v)) { border-bottom: 0; }
.pinned .btn { margin-top: 16px; }
@media (prefers-color-scheme: dark) { .pin-rich .r-v { background: rgba(255, 255, 255, .06); } }
.lp .pinned .pin-rich .r-step { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 12px 2px; gap: 18px; align-items: baseline; margin: 0; }
.lp .pinned .pin-rich .r-step:not(:has(+ .r-step)) { border-bottom: 1px solid var(--line); }
.lp .pinned .pin-rich .r-n { display: inline-block; background: none; color: var(--muted); width: auto; height: auto; min-width: 2.2em; font-size: .9rem; font-weight: 500; margin: 0; }
.lp .pinned .pin-rich .r-v { border: 0; background: #fff; border-radius: 18px; padding: 12px 16px; margin-top: 14px; color: var(--ink); gap: 12px; }
.lp .pinned .pin-rich .r-v .r-dot { margin: 0; }
@media (prefers-color-scheme: dark) { .lp .pinned .pin-rich .r-v { background: rgba(255, 255, 255, .06); } }
.pin-act { align-items: center; gap: 12px; margin-top: 16px; }
.pin-act .btn { margin-top: 0 !important; }
.how { margin: 8px 0 26px; max-width: 720px; }
.how h2 { font-size: 1.5rem; font-weight: 300; letter-spacing: -.03em; margin: 0 0 8px; }
.lp .how .r-step { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 14px 2px; gap: 18px; align-items: baseline; margin: 0; }
.lp .how .r-step:not(:has(+ .r-step)) { border-bottom: 1px solid var(--line); }
.lp .how .r-n { display: inline-block; background: none; color: var(--muted); width: auto; height: auto; min-width: 2.2em; font-size: .9rem; font-weight: 500; margin: 0; }

/* главная умещается на один экран ноутбука: плашка шага, закреплённое, поле заметки и первая запись */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k btn" "h btn" "p btn"; column-gap: 24px; align-items: center; padding: 16px 22px; border-radius: 26px; margin: 0 0 12px; }
.next .next-k { grid-area: k; margin: 0 0 2px; font-size: .68rem; }
.next h2 { grid-area: h; font-size: clamp(1.2rem, 2.6vw, 1.65rem); margin: 0; letter-spacing: -.03em; }
.next p { grid-area: p; margin: 2px 0 0; font-size: .9rem; }
.next > .row, .next > .btn, .next > a.btn { grid-area: btn; align-self: center; margin: 0; }
.next .btn { padding: 11px 26px; font-size: .98rem; }
.pinned { margin: 0 0 12px; border-radius: 24px; }
.pinned summary { padding: 11px 18px; }
.pin-t { font-size: 1rem; }
.pin-go { width: 26px; height: 26px; }
.pin-go::after { left: 8px; top: 8px; }
form[data-form="post"].card { padding: 12px 16px; gap: 8px; margin-bottom: 12px; border-radius: 24px; }
form[data-form="post"] textarea { min-height: 54px; height: 54px; padding: 10px 14px; border-radius: 16px; }
form[data-form="post"] .btn { padding: 8px 20px; }
form[data-form="post"] .check { font-size: .86rem; }
.post { margin-bottom: 12px; }
@media (max-width: 760px) {
  .next { grid-template-columns: 1fr; grid-template-areas: "k" "h" "p" "btn"; padding: 16px 18px; }
  .next > .row, .next > .btn { margin-top: 10px; }
}
/* закреплённое: текст на всю ширину блока, три правила в три колонки на широком экране */
.pin-rich { max-width: none; }
.pin-rich .r-ul li::before { top: .7em; }
.next { row-gap: 8px; padding-block: 20px; }
.next .next-k { margin-bottom: 4px; }
.next p { margin-top: 6px; }

/* фото и видео в заметках ленты */
.pf-attach { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: .88rem; font-weight: 500; color: var(--brand); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .15s, background .15s; }
.pf-attach:hover { box-shadow: inset 0 0 0 1px var(--brand); background: var(--tile2); }
.pf-attach .ic { width: 1.2em; height: 1.2em; }
.pf-left { align-items: center; gap: 12px; flex-wrap: wrap; }
.pf-prev { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.pf-i { position: relative; width: 84px; height: 84px; border-radius: 16px; overflow: hidden; background: var(--tile); }
.pf-i img, .pf-i video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-play { position: absolute; left: 6px; bottom: 6px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; }
.pf-play .ic { width: 12px; height: 12px; }
.pf-x { position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(0, 0, 0, .6); color: #fff; font-size: 15px; line-height: 1; padding: 0; }
.pmedia { display: grid; gap: 6px; margin: 8px 0 4px; border-radius: 20px; overflow: hidden; }
.pmedia.n1 { grid-template-columns: 1fr; } .pmedia.n2 { grid-template-columns: 1fr 1fr; } .pmedia.n3, .pmedia.n4 { grid-template-columns: 1fr 1fr; }
.pmedia.n3 > :first-child { grid-column: 1 / -1; }
.pmedia img, .pmedia video { width: 100%; height: 100%; max-height: 520px; object-fit: cover; display: block; background: var(--tile); border-radius: 0; }
.pmedia.n1 img { max-height: 560px; }
.pmedia.n1 video { object-fit: contain; max-height: 560px; background: transparent; }
.pmedia a { display: block; min-height: 0; }
@media (max-width: 760px) { .pmedia { border-radius: 16px; } .pf-attach span { display: none; } .pf-attach { padding: 8px 12px; } }
.prog-card { display: grid; gap: 12px; margin: 0 0 14px; }
.prog-card strong { font-size: 1.1rem; font-weight: 500; }
.prog-card .next-k { margin-bottom: 2px; }
.prog-pct { font-family: var(--font-head); font-weight: 300; font-size: 2.2rem; letter-spacing: -.04em; }

/* вопросы к уроку: на всю ширину колонки, вровень с кнопками «назад / дальше» */
.lp .ask { padding: 0; background: none; box-shadow: none; }
.lp .qa .link { justify-self: start; }
.lp .l-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp .l-foot .btn { width: 100%; justify-content: center; min-width: 0; }
.lp .l-foot .btn span { max-width: 100%; }
.lp .l-foot > span:empty { display: block; }
@media (max-width: 640px) { .lp .l-foot { grid-template-columns: 1fr; } }

/* вертикальные видео: на телефоне во всю ширину, на компьютере выше обычного */
.lp .lesson-video.portrait { max-height: 92vh; }
@media (max-width: 700px) { .lp .lesson-video, .lp .lesson-video.portrait { width: 100%; max-height: none; aspect-ratio: auto; } }

/* все видео урока одной ширины, чтобы не «прыгали»; высота — по пропорциям ролика */
.lp .lesson-video, .lp .lesson-video.portrait { display: block; width: min(100%, 500px); max-width: 100%; height: auto; max-height: none; margin-inline: auto; aspect-ratio: auto; }

/* единая рамка для всех видео урока: одна ширина и высота, помещается в экран; ролик вписан целиком */
.lp .lesson-video, .lp .lesson-video.portrait { display: block; width: 100%; max-width: 100%; height: min(64vh, 480px); max-height: none; aspect-ratio: auto; margin-inline: auto; object-fit: contain; background: #23232f; }
@media (max-width: 700px) { .lp .lesson-video, .lp .lesson-video.portrait { height: min(60vh, 420px); } }

/* заполненный блок дневника: фон зелёный, кнопка — как остальные кнопки сайта */
.lp .inl-diary.done .btn { background: var(--slate); color: #fff; box-shadow: none; }
.lp .inl-diary.done .audio { background: #fff; }
.lp .inl-diary.done .speed-btn.on { box-shadow: inset 0 0 0 2px var(--slate); }
@media (prefers-color-scheme: dark) { .lp .inl-diary.done .btn { background: #cfcdf0; color: #23223a; } }

/* «Часто повторяющиеся вопросы» — тёплый песок */
.lp .grp.yellow { background: #f4eee6; }
@media (prefers-color-scheme: dark) { .lp .grp.yellow { background: #2e2a24; } }

/* карточки-итоги («Непонимание речи», «Игнорирование речи»): сиреневая и дымчато-голубая вместо рыжей и оливковой */
.lp .sym-card { background: #f8f7fd; border: 1px solid #e1e0ef; }
.lp .sym-card h4 { background: #e7e6f5; color: #3a3a50; font-weight: 600; }
.lp .sym-card .sym-t { background: #e7e6f5; color: #4a4870; }
.lp .sym-card li::before { background: #8b83c4; }
.lp .sym-card .sym-g + .sym-g { border-top-color: #e1e0ef; }
.lp .sym-card.alt { background: #f4f8fc; border-color: #d9e4f0; }
.lp .sym-card.alt h4 { background: #dce7f3; color: #2f4560; }
.lp .sym-card.alt .sym-t { background: #dce7f3; color: #2f4560; }
.lp .sym-card.alt li::before { background: #6f93b8; }
.lp .sym-card.alt .sym-g + .sym-g { border-top-color: #d9e4f0; }
@media (prefers-color-scheme: dark) {
  .lp .sym-card { background: #23223a; border-color: #3a3956; } .lp .sym-card h4, .lp .sym-card .sym-t { background: #2f2e4a; color: #d9d7f5; }
  .lp .sym-card.alt { background: #202c3a; border-color: #34475c; } .lp .sym-card.alt h4, .lp .sym-card.alt .sym-t { background: #2a3b4f; color: #d5e3f2; }
}

/* карточки-итоги: один зелёный (шалфей) для обеих, в тон мятным отметкам сайта */
.lp .sym-card, .lp .sym-card.alt { background: #f3f9f5; border-color: #d3e6da; }
.lp .sym-card h4, .lp .sym-card.alt h4 { background: #dcebe1; color: #264a37; }
.lp .sym-card .sym-t, .lp .sym-card.alt .sym-t { background: #dcebe1; color: #2f5a45; }
.lp .sym-card li::before, .lp .sym-card.alt li::before { background: #5f9a7a; }
.lp .sym-card .sym-g + .sym-g, .lp .sym-card.alt .sym-g + .sym-g { border-top-color: #d3e6da; }
@media (prefers-color-scheme: dark) { .lp .sym-card, .lp .sym-card.alt { background: #1f2d27; border-color: #34493e; } .lp .sym-card h4, .lp .sym-card.alt h4, .lp .sym-card .sym-t, .lp .sym-card.alt .sym-t { background: #2a3f35; color: #d3eadc; } }

/* слайдер вопросов «Да / Частично / Нет» */
.qs { margin: 4px 0 6px; }
.qs-top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.qs-n { font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.qs-bar { flex: 1; height: 6px; border-radius: 6px; background: rgba(62, 62, 84, .12); overflow: hidden; }
.qs-bar i { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--slate); transition: width .3s ease; }
.qs-stage { min-height: 150px; }
.qs-slide[hidden] { display: none !important; }
.qs-slide.qs-in { animation: qsIn .28s ease; }
@keyframes qsIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.lp .qs-slide { border: 0 !important; padding: 6px 0 !important; margin: 0 !important; }
.lp .qs-slide .df-l { font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.25; margin-bottom: 18px; }
.lp .qs-slide .dchip span { padding: 12px 26px; font-size: 1.05rem; }
.qs-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; }
.qs-nav .btn[hidden] { display: none; }
.qs-nav .btn:disabled { opacity: .35; cursor: default; }
@media (prefers-reduced-motion: reduce) { .qs-slide.qs-in { animation: none; } }

/* «Ваш результат» в цветах сайта: шалфей, песок, пыльная роза; дорожка — сиреневая */
.lp .sc-bar { background: #e1e0ef; }
.lp .sc-bar .y, .lp .sc-legend .y::before { background: #5f9a7a; }
.lp .sc-bar .p, .lp .sc-legend .p::before { background: #c4a977; }
.lp .sc-bar .n, .lp .sc-legend .n::before { background: #c27c96; }
.lp .sc-msg.good { background: #dcebe1; color: #264a37; }
.lp .sc-msg.mid { background: #f4eee6; color: #5d4a30; }
.lp .sc-msg.low { background: #f3e1e8; color: #6b3550; }
@media (prefers-color-scheme: dark) { .lp .sc-bar { background: #3a3956; } .lp .sc-msg.good { background: #2a3f35; color: #d3eadc; } .lp .sc-msg.mid { background: #2e2a24; color: #e3d2b0; } .lp .sc-msg.low { background: #3a2832; color: #f0cfdc; } }

/* «Ваш результат»: фиолетовые сегменты разной высоты (Да — самый высокий) */
.lp .sc-bar { height: 28px; align-items: flex-end; gap: 3px; background: transparent; border-radius: 0; overflow: visible; }
.lp .sc-bar i { border-radius: 8px; }
.lp .sc-bar .y { height: 100%; background: #5c55a6; }
.lp .sc-bar .p { height: 64%; background: #8b83c4; }
.lp .sc-bar .n { height: 32%; background: #c3beea; }
.lp .sc-legend .y::before { background: #5c55a6; } .lp .sc-legend .p::before { background: #8b83c4; } .lp .sc-legend .n::before { background: #c3beea; }
@media (prefers-color-scheme: dark) { .lp .sc-bar { background: transparent; } .lp .sc-bar .y, .lp .sc-legend .y::before { background: #a9a2f0; } .lp .sc-bar .p, .lp .sc-legend .p::before { background: #7f78c9; } .lp .sc-bar .n, .lp .sc-legend .n::before { background: #4f4a8c; } }
/* выбранный вариант «Да / Частично / Нет» — тёмный, текст читается */
.lp .dchip input:checked + span { background: var(--slate); color: #fff; border-color: var(--slate); }