/* Проигрыватель упражнений (core/player.js) в стиле Liquid Glass — для страницы ученика.
   Разметка та же, что в тренажёре; здесь только оформление через переменные app.css. */
.trainer-card { position: relative; padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 14px;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r); box-shadow: var(--glass-shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.card-top-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.verb-level-tag, .word-pos-tag, .word-mastery-tag { font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--field); border: 1px solid var(--field-border); color: var(--muted); }
.word-mastery-tag { margin-left: auto; }
.complain-btn, .session-card-exit-btn { display: none !important; }
.prompt-container { display: flex; flex-direction: column; gap: 6px; text-align: center; }
.conjugation-task-badge-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.task-badge { font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--glass-strong); border: 1px solid var(--glass-border); }
.prompt-instruction { font-size: .84rem; color: var(--muted); }
.prompt-russian { font-family: var(--display); font-size: 1.6rem; line-height: 1.25; margin: 2px 0; overflow-wrap: anywhere; }
.prompt-transcription { color: var(--muted); font-size: .9rem; }
.listen-controls { display: flex; gap: 8px; justify-content: center; }
.btn-secondary, .btn-outline, .btn-ghost { font: 600 .88rem var(--font); padding: 9px 14px; border-radius: var(--r-sm); border: 1px solid var(--field-border); background: var(--glass-strong); color: var(--ink); cursor: pointer; }
.btn-ghost { background: none; border-color: transparent; color: var(--muted); }
.btn-primary { font: 600 .95rem var(--font); padding: 11px 16px; border-radius: var(--r-sm); border: none; background: var(--accent); color: var(--accent-ink); box-shadow: var(--accent-shadow); cursor: pointer; }
.btn-sm { padding: 7px 12px; font-size: .84rem; }
.btn-lg { padding: 13px 18px; font-size: 1rem; }
.btn-icon { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 4px 8px; color: var(--ink); }
.key-hint { display: none; }
.answer-form { display: flex; flex-direction: column; gap: 6px; }
.input-field-label { font-size: .84rem; color: var(--muted); }
.conjugation-target-highlight { color: var(--ink); font-weight: 700; }
.input-wrapper { display: flex; gap: 8px; }
.verb-input { flex: 1; min-width: 0; font: 600 1.15rem var(--font); color: var(--ink); background: var(--field); border: 1.5px solid var(--field-border); border-radius: var(--r-sm); padding: 12px 14px; -webkit-appearance: none; appearance: none; }
.verb-input::-webkit-search-decoration, .verb-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.verb-input:focus { outline: none; border-color: var(--accent); }
.verb-input.input-success { border-color: var(--good); background: var(--good-bg); }
.submit-btn { flex: none; }

.builder-area { display: flex; flex-direction: column; gap: 10px; }
.builder-answer { min-height: 52px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border-bottom: 2px dashed var(--field-border); }
.builder-bank { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.builder-tile { font: 600 1rem var(--font); padding: 8px 12px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--ink); cursor: pointer; box-shadow: 0 2px 0 var(--field-border); }
.builder-tile.used { opacity: .3; }
.builder-tile.picked { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.builder-actions { display: flex; gap: 8px; justify-content: center; }

.choice-buttons { margin: 4px 0; }
.choice-sentence { font-family: var(--display); font-size: 1.25rem; text-align: center; line-height: 1.6; }
.choice-stack { display: inline-flex; flex-direction: column; gap: 5px; vertical-align: middle; margin: 4px 8px; }
.choice-btn { font: 700 1.05rem var(--font); min-width: 74px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--field-border); background: var(--glass-strong); color: var(--ink); cursor: pointer; }
.choice-btn.choice-correct { border-color: var(--good); background: var(--good-bg); }
.choice-btn.choice-wrong { border-color: var(--bad); background: var(--bad-bg); }

.quick-chars-container { display: flex; flex-direction: column; gap: 6px; }
.quick-chars-header { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: .76rem; color: var(--muted); }
.text-link { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.quick-chars-buttons { display: flex; flex-wrap: wrap; gap: 5px; }
.char-btn { font: 600 1rem var(--font); width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--field-border); background: var(--glass-strong); color: var(--ink); cursor: pointer; }
.keyboard-guide { font-size: .8rem; color: var(--muted); }

.feedback-area { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-sm); background: var(--good-bg); }
.feedback-badge { font-weight: 700; color: var(--good); }
.correct-answer-display { font-family: var(--display); font-size: 1.35rem; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.transcription-display { font-size: .86rem; color: var(--muted); }
.word-details-display, .mistake-pos-info { display: flex; flex-wrap: wrap; gap: 5px; }
.word-details-pill { font-size: .76rem; padding: 3px 9px; border-radius: 99px; background: var(--glass-strong); border: 1px solid var(--glass-border); }
.word-details-pill.highlight { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.example-box { font-size: .88rem; padding: 10px 12px; border-radius: var(--r-sm); background: var(--glass-strong); }
.example-el { font-weight: 600; }
.speak-example { cursor: pointer; }
.speak-example::before { content: '🔊 '; font-size: .85em; opacity: .75; }
.example-ru { color: var(--muted); }
.feedback-actions { display: flex; justify-content: flex-end; }
.card-footer-actions { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mistake-conjugation-actions { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* Окно ошибки */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: rgba(8, 14, 24, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-overlay[hidden] { display: none; }
.modal-dialog { width: min(560px, 100%); max-height: calc(100vh - 24px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: var(--r); box-shadow: var(--glass-shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
@media (min-width: 700px) { .modal-overlay { align-items: center; } }
.modal-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 14px 16px 8px; }
.modal-header-title { display: flex; gap: 8px; align-items: center; }
.modal-header h2 { font-size: 1.05rem; }
.modal-body-scroll { overflow-y: auto; padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.modal-footer { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.mistake-banner { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.mistake-word-main { display: flex; justify-content: center; align-items: center; gap: 6px; }
.mistake-greek { font-family: var(--display); font-size: 1.45rem; font-weight: 700; overflow-wrap: anywhere; }
.mistake-transcription, .mistake-hint { font-size: .84rem; color: var(--muted); }
.mistake-russian { font-weight: 600; }
.mistake-pos-info { justify-content: center; }
.diff-fix { color: var(--good); background: var(--good-bg); border-radius: 3px; padding: 0 1px; }
.diff-title { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.diff-display { display: flex; flex-wrap: wrap; gap: 8px; font: 600 1.15rem var(--font); margin: 6px 0; }
.diff-word { display: inline-flex; flex-wrap: wrap; gap: 1px; max-width: 100%; }
.diff-char { display: inline-block; min-width: .6em; text-align: center; }
.diff-match { color: var(--ink); }
.diff-wrong { color: var(--bad); background: var(--bad-bg); border-radius: 3px; }
.diff-missing { color: var(--bad); border-bottom: 2px solid var(--bad); }
.diff-word-wrong { color: var(--bad); text-decoration: line-through; }
.diff-word-missing { color: var(--bad); }
.mistake-diagnosis-card { padding: 12px 14px; border-radius: var(--r-sm); background: var(--glass); border: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 8px; }
.diagnosis-header { display: flex; gap: 8px; align-items: center; }
.diagnosis-title { margin: 0; font-size: .98rem; }
.diagnosis-body { font-size: .9rem; line-height: 1.5; }
.diagnosis-rule { font-size: .84rem; padding: 10px 12px; border-radius: 10px; background: var(--field); white-space: pre-line; }
.sentence-issues { margin: 4px 0 0; padding-left: 18px; }
.paradigm-table-container { width: 100%; overflow-x: auto; }
.paradigm-table { border-collapse: collapse; width: 100%; font-size: .84rem; }
.paradigm-table th, .paradigm-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.paradigm-table th { font-size: .74rem; color: var(--muted); font-weight: 600; }
.paradigm-cell-speakable { cursor: pointer; }
.paradigm-target-cell { background: var(--good-bg); font-weight: 700; }
.paradigm-pronoun-sub, .paradigm-form-alt { display: block; font-size: .72rem; color: var(--muted); }
.close-modal-btn { font-size: 1rem; }

/* Итог задания */
.hw-summary { display: flex; flex-direction: column; gap: 12px; }
.hw-score { font-family: var(--display); font-size: 2.2rem; font-weight: 800; }
.hw-mistake { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.hw-mistake:last-child { border-bottom: none; }
.hw-mistake s { color: var(--bad); }
.hw-progress { height: 8px; border-radius: 99px; background: var(--field); overflow: hidden; }
.hw-progress i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }

/* Греческая клавиатура: значок под полем, по нажатию раскрывается */
.quick-chars-container.gk { align-items: flex-start; gap: 8px; }
.gk[hidden] { display: none; }
.gk-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 32px; border-radius: 10px; border: 1px solid var(--field-border); background: var(--glass-strong); color: var(--muted); cursor: pointer; }
.gk-toggle.open, .gk-toggle:hover { color: var(--accent); border-color: var(--accent); }
.gk-panel { display: flex; flex-direction: column; gap: 6px; padding: 10px; width: 100%; max-width: 460px; border: 1px solid var(--field-border); border-radius: 14px; background: var(--glass-strong); }
.gk-panel[hidden] { display: none; }
.gk-row { display: flex; gap: 5px; justify-content: center; }
.gk-key { flex: 1 1 0; min-width: 0; width: auto; max-width: 44px; height: 40px; padding: 0; }
.gk-key.gk-wide { max-width: 64px; }
.gk-key.gk-accent { max-width: none; flex: 2 1 0; font-size: .86rem; }
.gk-key.gk-space { max-width: none; flex: 3 1 0; }
.gk-key.armed { background: var(--accent); border-color: var(--accent); color: #fff; }