:root { --fl-bg:#fffaf0; --fl-ok:#2e9d4f; --fl-warn:#d98200; --fl-bad:#d23c3c; --fl-primary:#3b6fe0; }
body { background:var(--fl-bg); }
.card { border:0; border-radius:18px; box-shadow:0 2px 10px #0000000f; }

/* Главная */
.lesson-card { color:inherit; transition:transform .15s; }
.lesson-card:hover { transform:translateY(-3px); }
.lesson-num { display:inline-flex; width:36px; height:36px; border-radius:50%; background:var(--fl-primary); color:#fff; align-items:center; justify-content:center; font-weight:700; }
.lesson-card.passed .lesson-num { background:var(--fl-ok); }
.seo-text { max-width:760px; }
.faq { background:#fff; border-radius:12px; padding:12px 16px; margin-bottom:8px; }
.faq summary { font-weight:600; cursor:pointer; }
.faq p { margin:8px 0 0; }

/* Схема флейты */
.recorder { width:100%; max-width:200px; height:auto; }
.rc-head { fill:#f3d9a4; stroke:#8a6a2f; stroke-width:2; }
.rc-body { fill:#fbe6bd; stroke:#8a6a2f; stroke-width:2; }
.rc-window { fill:#5b4520; }
.rc-thumb-line, .rc-split { stroke:#b9a27a; stroke-width:2; stroke-dasharray:4 3; }
.rc-hole { fill:#fff; stroke:#333; stroke-width:2.5; transition:fill .2s; }
.rc-hole.closed { fill:#222; }
.rc-half { fill:#222; pointer-events:none; }
.rc-hole.hint-close { stroke:var(--fl-bad); stroke-width:5; animation:blink .8s infinite; }
.rc-hole.hint-open { stroke:var(--fl-warn); stroke-width:5; animation:blink .8s infinite; }
.rc-small { font-size:13px; fill:#666; }
.rc-label { font-size:16px; font-weight:700; fill:#222; }
@keyframes blink { 50% { opacity:.4; } }

/* Слайдшоу */
.slide { display:none; margin:0; text-align:center; }
.slide.active { display:block; animation:fade .4s; }
.slide-visual { min-height:260px; display:flex; align-items:center; justify-content:center; }
.slide-visual .recorder { max-height:300px; }
.slide-visual img { max-width:100%; max-height:300px; border-radius:12px; }
.slide-emoji { font-size:7rem; line-height:1; }
.slide-text { font-size:1.2rem; margin-top:12px; min-height:3.5em; }
.slide-dots { display:flex; gap:6px; justify-content:center; }
.slide-dots span { width:8px; height:8px; border-radius:50%; background:#ccc; }
.slide-dots span.on { background:var(--fl-primary); }
@keyframes fade { from { opacity:0; } }

/* Упражнение и тренажёр */
.note-chip { display:inline-block; padding:6px 12px; margin:2px; border-radius:999px; background:#eef1f8; font-weight:600; }
.note-chip.cur { background:var(--fl-primary); color:#fff; transform:scale(1.1); }
.note-chip.done { background:var(--fl-ok); color:#fff; }
.ex-heard { font-size:3.2rem; font-weight:800; text-align:center; line-height:1.1; }
.tuner { position:relative; height:22px; margin:10px 0 4px; border-radius:11px;
  background:linear-gradient(90deg,var(--fl-bad),var(--fl-warn) 30%,var(--fl-ok) 42%,var(--fl-ok) 58%,var(--fl-warn) 70%,var(--fl-bad)); }
.tuner .needle { position:absolute; top:-4px; left:calc(50% - 2px); width:4px; height:30px; background:#000; border-radius:2px; transition:left .08s; }
.ex-hint { font-size:1.15rem; font-weight:600; min-height:3em; margin-top:8px; }
.ex-hint.ok { color:var(--fl-ok); } .ex-hint.warn { color:var(--fl-warn); } .ex-hint.bad { color:var(--fl-bad); }
.ex-fig .recorder { max-height:260px; }

/* Игра */
.gm-card { border:0; background:#fff; transition:transform .15s; }
.gm-card:hover { transform:translateY(-3px); }
.gm-wrap { position:relative; border-radius:18px; overflow:hidden; box-shadow:0 4px 18px #0002; }
#gm-canvas { display:block; width:100%; }
.gm-result { position:absolute; inset:0; background:rgba(20,30,70,.85); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; }
.gm-result.d-none { display:none !important; }

/* Шапка на узких экранах */
@media (max-width: 480px) {
  .navbar-brand { font-size:1rem; margin-right:.25rem; }
  .navbar-nav .nav-link { padding-left:.35rem !important; padding-right:.35rem !important; font-size:.9rem; }
}

/* Игра: поле + панель аппликатуры */
.gm-row { display:flex; gap:10px; align-items:stretch; }
.gm-row .gm-wrap { flex:1 1 auto; min-width:0; }
.gm-side { flex:0 0 150px; background:#fff; border-radius:18px; box-shadow:0 2px 10px #0000000f; padding:10px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; }
.gm-side-label { font-size:.8rem; color:#888; text-transform:uppercase; letter-spacing:.05em; }
.gm-side-note { font-size:1.9rem; font-weight:800; line-height:1.1; margin-bottom:4px; }
.gm-fig { width:100%; flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
.gm-fig .recorder { width:100%; max-width:150px; max-height:360px; }
.gm-fig .rc-label { display:none; }
.gm-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:2px 8px; font-size:.72rem; color:#555; margin-top:4px; }
.lg { display:inline-block; width:11px; height:11px; border-radius:50%; border:2px solid #333; background:#fff; vertical-align:-1px; margin-right:3px; }
.lg-closed { background:#222; }
.lg-half { background:linear-gradient(90deg,#222 50%,#fff 50%); }
.gm-side-next { font-size:.85rem; color:#666; margin-top:6px; min-height:1.3em; }
@media (max-width: 480px) {
  .gm-row { gap:6px; }
  .gm-side { flex-basis:104px; padding:8px 4px; }
  .gm-side-note { font-size:1.4rem; }
}

/* Статьи */
.article h2 { margin-top:1.6rem; }
.article table { width:100%; background:#fff; border-radius:12px; overflow:hidden; margin:12px 0; }
.article th, .article td { padding:8px 10px; border-bottom:1px solid #eee; vertical-align:top; }
.article .tip { background:#eef6ff; border-left:4px solid var(--fl-primary); padding:10px 14px; border-radius:8px; margin:12px 0; }
.fing-table { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin:12px 0; }
.fing-table figure { background:#fff; border-radius:12px; padding:6px; margin:0; text-align:center; }
.fing-table .rc-label { display:none; }
.fing-table figcaption { font-weight:700; font-size:.85rem; }
.melody-notes { background:#fff; border-radius:12px; padding:10px 14px; margin-bottom:8px; }
.melody-notes p { margin:0; font-family:ui-monospace,monospace; font-size:.9rem; word-spacing:.2em; }
@media (max-width: 480px) { .navbar-nav .nav-link { padding-left:.25rem !important; padding-right:.25rem !important; font-size:.82rem; } }

/* Мои мелодии */
.ed-preview { min-height:2.4em; }
.ed-preview .note-chip { text-align:left; }
.note-chip.rest { background:#f1f1f1; color:#888; }
.note-chip.bad { background:#fde2e2; color:#b22; }

/* Система аппликатуры: html[data-system] ставит progress.js */
.sys-german { display:none; }
html[data-system="german"] .sys-german { display:inline; }
html[data-system="german"] .sys-baroque { display:none; }

/* Картинка ритма в слайдах */
.rhythm { width:100%; max-width:320px; height:auto; }
.rh-grid { stroke:#c9d3ea; stroke-width:1.5; stroke-dasharray:3 4; }
.rh-note { fill:#2e86de; }
.rh-rest { fill:none; stroke:#999; stroke-width:2; stroke-dasharray:6 4; }
.rh-label { font-size:13px; font-weight:700; fill:#333; }

/* Настройка под флейту */
.su-meter { position:relative; height:16px; background:#eef1f8; border-radius:8px; overflow:hidden; }
.su-level { height:100%; width:0; background:linear-gradient(90deg,#2e9d4f,#e6b800); transition:width .05s; }
.su-gate { position:absolute; top:0; bottom:0; width:3px; background:var(--fl-bad); }
.su-fig .recorder { max-width:90px; }