/* Free-lesson overlay — бесплатный урок внутри кабинета. */

body.fl-open { overflow: hidden; }

.fl-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(20, 30, 28, 0.55);
  backdrop-filter: blur(3px);
  display: flex; justify-content: center; align-items: stretch;
  animation: fl-fade 0.18s ease;
}
@keyframes fl-fade { from { opacity: 0; } to { opacity: 1; } }

.fl-sheet {
  background: var(--bg, #f7faf9);
  width: 100%; max-width: 760px;
  display: flex; flex-direction: column;
  box-shadow: 0 0 40px rgba(0,0,0,0.18);
  animation: fl-slide 0.22s cubic-bezier(.2,.7,.3,1);
}
@keyframes fl-slide { from { transform: translateY(16px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

.fl-topbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--border, #e3eae8);
  background: var(--card, #fff);
}
.fl-topbar-title { font-weight: 600; font-size: 1rem; flex: 1; color: var(--text, #1d2b28); }
.fl-close {
  flex: 0 0 auto; width: 34px; height: 34px; border: none; border-radius: 9px;
  background: var(--bg, #eef3f1); color: var(--text, #1d2b28);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.fl-close:hover { background: var(--border, #e0e7e5); }

.fl-scroll { flex: 1 1 auto; overflow-y: auto; padding: 18px; -webkit-overflow-scrolling: touch; }
.fl-section { margin-bottom: 26px; }
.fl-section:empty { margin: 0; }

.fl-h3 { font-size: 1.05rem; margin: 0 0 6px; color: var(--text, #1d2b28); }
.fl-hint { font-size: 0.85rem; color: var(--muted, #6a7975); margin: 0 0 12px; }
.fl-loading, .fl-empty { color: var(--muted, #6a7975); font-size: 0.9rem; padding: 14px 0; }
.fl-loading--full, .fl-empty { text-align: center; padding: 60px 20px; }

/* intro */
.fl-intro {
  display: flex; gap: 12px; padding: 14px; border-radius: 12px;
  background: var(--accent-soft, #e8f3ef); margin-bottom: 16px;
}
.fl-intro-emoji { font-size: 1.5rem; }
.fl-intro-title { font-weight: 600; margin-bottom: 3px; }
.fl-intro-body { font-size: 0.9rem; color: var(--muted, #51605c); }

/* video */
.fl-video { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; margin-bottom: 16px; background: #000; }
.fl-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* lesson body */
.fl-lesson-title { font-size: 1.2rem; margin: 0 0 4px; }
.fl-body { line-height: 1.7; color: var(--text, #25322f); font-size: 0.96rem; }
.fl-body table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.fl-body th, .fl-body td { border: 1px solid var(--border, #e3eae8); padding: 6px 9px; font-size: 0.88rem; }
.fl-body img { max-width: 100%; height: auto; border-radius: 8px; }

/* cloze */
.fl-blank-label { font-weight: 600; }
.fl-blank-label--gap { color: var(--muted, #97a4a0); letter-spacing: 1px; }
.fl-blank-widget { display: inline-block; }
.fl-blank-widget select {
  border: 1.5px solid var(--border, #cfdbd7); border-radius: 7px;
  padding: 2px 6px; font-size: 0.9rem; background: var(--card, #fff); color: var(--text, #1d2b28);
  max-width: 220px;
}
.fl-blank-widget.correct select { border-color: #2f9e7e; background: #e7f6ef; }
.fl-blank-widget.wrong select { border-color: #d99a3a; background: #fbf2e4; }
.fl-blank-widget.filled select { border-color: var(--accent, #2f9e7e); }

/* diagnostic */
.fl-diag-progress { height: 5px; border-radius: 3px; background: var(--border, #e3eae8); overflow: hidden; margin-bottom: 14px; }
.fl-diag-progress-fill { height: 100%; background: var(--accent, #2f9e7e); width: 0; transition: width 0.3s ease; }
.fl-diag-q { font-weight: 600; margin-bottom: 12px; }
.fl-diag-opts { display: flex; flex-direction: column; gap: 8px; }
.fl-option {
  border: 1.5px solid var(--border, #d9e3e0); border-radius: 10px; padding: 11px 14px;
  cursor: pointer; font-size: 0.92rem; transition: border-color .15s, background .15s;
}
.fl-option:hover { border-color: var(--accent, #2f9e7e); }
.fl-option.selected { border-color: var(--accent, #2f9e7e); background: var(--accent-soft, #e8f3ef); }
.fl-diag-report { margin-top: 8px; }
.fl-diag-score { font-weight: 700; font-size: 1.05rem; margin-bottom: 12px; }
.fl-bd-item { border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid var(--border, #e3eae8); }
.fl-bd-item.no { background: #fbf2e4; border-color: #ecd5ac; }
.fl-bd-item.ok { background: #eef7f2; border-color: #cfe9dc; }
.fl-bd-head { display: flex; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.fl-bd-mark.ok { color: #2f9e7e; } .fl-bd-mark.no { color: #d99a3a; }
.fl-bd-line { font-size: 0.86rem; color: var(--muted, #51605c); }
.fl-bd-line.right b { color: #2f9e7e; }

/* AI tutor */
.fl-ai-hints { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fl-ai-hint { border: 1px solid var(--border, #d9e3e0); background: var(--card, #fff); border-radius: 20px; padding: 5px 12px; font-size: 0.82rem; cursor: pointer; color: var(--text, #1d2b28); }
.fl-ai-hint:hover { border-color: var(--accent, #2f9e7e); }
.fl-ai-messages { display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow-y: auto; margin-bottom: 10px; }
.fl-ai-msg { padding: 9px 13px; border-radius: 12px; font-size: 0.9rem; line-height: 1.55; max-width: 90%; }
.fl-ai-msg.user { align-self: flex-end; background: var(--accent, #2f9e7e); color: #fff; }
.fl-ai-msg.bot { align-self: flex-start; background: var(--card, #fff); border: 1px solid var(--border, #e3eae8); }
.fl-ai-msg.err { align-self: flex-start; background: #fbf2e4; border: 1px solid #ecd5ac; color: #8a5a16; }
.fl-ai-msg p:first-child { margin-top: 0; } .fl-ai-msg p:last-child { margin-bottom: 0; }
.fl-ai-cta { display: inline-block; margin-top: 8px; background: var(--accent, #2f9e7e); color: #fff; padding: 7px 14px; border-radius: 9px; text-decoration: none; font-size: 0.85rem; }
.fl-ai-input { display: flex; gap: 8px; }
.fl-ai-input input { flex: 1; border: 1.5px solid var(--border, #cfdbd7); border-radius: 10px; padding: 10px 13px; font-size: 0.92rem; background: var(--card, #fff); color: var(--text, #1d2b28); }
.fl-ai-input button { flex: 0 0 auto; width: 44px; border: none; border-radius: 10px; background: var(--accent, #2f9e7e); color: #fff; font-size: 1.2rem; cursor: pointer; }
.fl-ai-remaining { font-size: 0.78rem; color: var(--muted, #6a7975); margin-top: 6px; }
.fl-caret { display: inline-block; width: 7px; height: 1.1em; background: var(--accent, #2f9e7e); vertical-align: text-bottom; animation: fl-blink 1s steps(2) infinite; }
@keyframes fl-blink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

/* SRS */
.fl-srs-start { border: none; background: var(--accent, #2f9e7e); color: #fff; padding: 11px 18px; border-radius: 10px; font-size: 0.92rem; cursor: pointer; }
.fl-srs-card { position: relative; min-height: 180px; perspective: 1000px; }
.fl-srs-face { border: 1px solid var(--border, #e3eae8); border-radius: 14px; padding: 22px; background: var(--card, #fff); }
.fl-srs-back { display: none; }
.fl-srs-card.flipped .fl-srs-front { display: none; }
.fl-srs-card.flipped .fl-srs-back { display: block; }
.fl-srs-q { font-size: 0.82rem; color: var(--muted, #6a7975); margin-bottom: 10px; }
.fl-srs-phrase { font-size: 1.05rem; line-height: 1.6; margin-bottom: 18px; }
.fl-srs-phrase mark { background: #fbf2e4; padding: 0 4px; border-radius: 4px; }
.fl-srs-flip { border: 1.5px solid var(--accent, #2f9e7e); background: transparent; color: var(--accent, #2f9e7e); padding: 9px 16px; border-radius: 9px; cursor: pointer; }
.fl-srs-a { font-size: 1.2rem; font-weight: 600; margin-bottom: 16px; color: var(--accent, #2f9e7e); }
.fl-srs-grade { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.fl-srs-grade button { border: 1.5px solid var(--border, #d9e3e0); background: var(--card, #fff); border-radius: 9px; padding: 9px 4px; font-size: 0.82rem; cursor: pointer; color: var(--text, #1d2b28); }
.fl-srs-grade button:hover { border-color: var(--accent, #2f9e7e); }
.fl-srs-done-title { font-weight: 700; font-size: 1.05rem; margin-bottom: 6px; }
.fl-srs-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fl-srs-pill { font-size: 0.8rem; background: var(--accent-soft, #e8f3ef); border-radius: 16px; padding: 4px 11px; }

/* upsell footer */
.fl-upsell {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--border, #e3eae8);
  background: var(--card, #fff);
}
.fl-upsell-text { flex: 1; font-size: 0.88rem; color: var(--text, #1d2b28); }
.fl-upsell-text s { color: var(--muted, #97a4a0); }
.fl-upsell-btn { flex: 0 0 auto; background: var(--accent, #2f9e7e); color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; }

@media (max-width: 600px) {
  .fl-sheet { max-width: 100%; }
  .fl-scroll { padding: 14px; }
  .fl-srs-grade { grid-template-columns: repeat(2, 1fr); }
}