#listen-answer-screen { min-height:100vh; background:var(--bg, #0f172a); }
.listen-empty { width:100%; padding:50px 20px; text-align:center; color:#94a3b8; }
.listen-empty .material-symbols-rounded { font-size:54px; }
.listen-player { width:min(860px, 94%); margin:16px auto 40px; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:16px; align-items:start; }
.listen-audio-card,.listen-quiz { background:#fff; color:#1e293b; border-radius:18px; padding:18px; box-shadow:0 10px 30px rgba(0,0,0,.16); }
.listen-hero-icon { display:block; text-align:center; font-size:64px; color:#3b82f6; }
.listen-reference-frame { width:100%; height:170px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:12px; background:#f1f5f9; }
.listen-reference-image { display:block; width:100%; height:100%; object-fit:contain; }
.btn-listen-answer-main.is-loading { cursor:wait; }
.listen-button-dots { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:24px; }
.listen-button-dots i { display:block; width:11px; height:11px; border:2px solid #20231f; border-radius:50%; background:#fff9eb; animation:listen-loading-bounce .9s ease-in-out infinite; }
.listen-button-dots i:nth-child(2) { animation-delay:.14s; background:#f4c84a; }
.listen-button-dots i:nth-child(3) { animation-delay:.28s; background:#ff6b4a; }
@keyframes listen-loading-bounce { 0%,60%,100% { transform:translateY(0); } 30% { transform:translateY(-10px); } }
@media (prefers-reduced-motion:reduce) { .listen-button-dots i { animation:none; } }
.listen-hero-media { grid-column:1/-1; display:flex; justify-content:center; padding:2px 0 8px; }
.listen-hero-media .listen-reference-frame { width:min(620px,100%); height:300px; }
.listen-audio-card audio { display:none; }
.listen-custom-player { display:grid; grid-template-columns:48px auto 1fr auto 42px; align-items:center; gap:10px; margin:16px 0; padding:11px; border:2px solid var(--la-ink,#20231f); border-radius:16px; background:var(--la-paper,#f6f0df); box-shadow:3px 3px 0 var(--la-ink,#20231f); }
.listen-play,.listen-volume { display:grid; place-items:center; border:2px solid var(--la-ink,#20231f); color:var(--la-ink,#20231f); cursor:pointer; }
.listen-play { width:46px; height:46px; border-radius:50%; background:var(--la-coral,#ff6b4a); box-shadow:2px 2px 0 var(--la-ink,#20231f); }
.listen-volume { width:38px; height:38px; border-radius:11px; background:var(--la-sky,#79b8ff); }
.listen-play:active,.listen-volume:active { transform:translate(2px,2px); box-shadow:none; }
.listen-time { min-width:34px; font-size:.78rem; font-weight:800; color:var(--la-ink,#20231f); }
.listen-progress-range { width:100%; accent-color:var(--la-coral,#ff6b4a); cursor:pointer; }
.listen-controls { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.listen-controls a { text-decoration:none; }
.listen-tool { display:inline-flex; align-items:center; gap:5px; min-height:38px; padding:7px 11px; border:1px solid #dbe3ee; border-radius:999px; background:#f8fafc; color:#334155; font-weight:700; cursor:pointer; text-decoration:none; }
.listen-tool:hover { background:#eff6ff; border-color:#93c5fd; color:#2563eb; }
.listen-tool .material-symbols-rounded { font-size:19px; }
.listen-subtitle { margin-top:20px; min-height:58px; padding:14px; border-radius:12px; background:#0f172a; color:white; text-align:center; font-size:1.2rem; }
.listen-english { margin-top:12px; padding:14px; border-radius:12px; background:#eff6ff; color:#1d4ed8; white-space:pre-wrap; }
.listen-english { min-height:58px; box-sizing:border-box; text-align:center; font-size:1.2rem; line-height:1.4; }
.listen-english,.listen-english * { color:#20231f!important; -webkit-text-fill-color:#20231f!important; }
.hidden { display:none !important; }
.listen-quiz { min-height:390px; display:flex; flex-direction:column; }
.listen-quiz-title { display:flex; justify-content:space-between; align-items:center; }
.listen-quiz-title h2 { margin:0 0 12px; }
.listen-carousel { flex:1; position:relative; }
.listen-question { display:none; border:0; margin:0; padding:4px; min-width:0; }
.listen-question.active { display:block; animation:listenSlideIn .18s ease-out; }
.listen-question legend { width:100%; padding:0 0 14px; font-size:1.15rem; font-weight:800; }
.listen-question-es,.listen-question-en { display:block; }
.listen-question-en { margin-top:4px; color:#64748b; font-size:.88rem; font-weight:650; }
.listen-option-copy { display:grid; gap:2px; }
.listen-option-copy strong { font-size:.96rem; }
.listen-option-copy small { color:#64748b; font-size:.78rem; font-weight:600; }
.listen-question-number { color:#64748b; font-size:.78rem; font-weight:800; margin-bottom:8px; }
.listen-question label { display:flex; align-items:center; gap:10px; margin:7px 0; padding:11px 12px; cursor:pointer; border:1px solid #e2e8f0; border-radius:10px; background:#f8fafc; }
.listen-question label:has(input:checked) { border-color:#3b82f6; background:#eff6ff; color:#1d4ed8; }
.listen-question label.answer-correct { border-color:#10b981!important; background:#ecfdf5!important; color:#047857!important; }
.listen-question label.answer-incorrect { border-color:#ef4444!important; background:#fef2f2!important; color:#b91c1c!important; }
.listen-question.correct { border-color:#10b981; background:#ecfdf5; }
.listen-question.incorrect { border-color:#ef4444; background:#fef2f2; }
.listen-carousel-nav { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:14px; }
.listen-nav { width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; background:#0f172a; color:#fff; cursor:pointer; }
.listen-nav:disabled { opacity:.25; cursor:default; }
.listen-dots { display:flex; gap:6px; }
.listen-dot { width:8px; height:8px; padding:0; border:0; border-radius:50%; background:#cbd5e1; cursor:pointer; }
.listen-dot.active { width:22px; border-radius:999px; background:#3b82f6; }
.listen-dot.answered-correct { background:#10b981; }
.listen-dot.answered-incorrect { background:#ef4444; }
#listen-check { display:none!important; }
.listen-feedback { position:fixed; inset:0; z-index:10020; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(15,18,16,.42); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
.listen-feedback-card { width:min(520px,90vw); display:flex; align-items:flex-start; gap:14px; padding:22px; border:2px solid #20231f; border-radius:18px; color:#20231f; box-shadow:7px 7px 0 #20231f; animation:listenFeedbackIn .2s ease-out; }
.listen-feedback.is-correct .listen-feedback-card { background:var(--la-mint,#71d7b3); }
.listen-feedback.is-incorrect .listen-feedback-card { background:#d94a32; }
.listen-feedback.is-incorrect .listen-feedback-card,.listen-feedback.is-incorrect .listen-feedback-card * { color:#fff!important; -webkit-text-fill-color:#fff!important; }
.listen-feedback.is-final .listen-feedback-card { background:var(--la-lavender,#bba5ff); }
.listen-score-card { align-items:center; }
.listen-score-badge { flex:0 0 auto; width:86px; height:86px; display:flex; align-items:baseline; justify-content:center; border:2px solid #20231f; border-radius:50%; background:var(--la-sun,#f4c84a); box-shadow:3px 3px 0 #20231f; }
.listen-score-badge strong { font-size:2.4rem; line-height:86px; }
.listen-score-badge span { margin-left:3px; font-size:1rem; font-weight:800; }
.listen-feedback-icon { flex:0 0 auto; display:grid; place-items:center; width:38px; height:38px; border:2px solid var(--la-ink,#20231f); border-radius:50%; background:var(--la-warm,#fff9eb); }
.listen-feedback strong { display:block; font-size:1rem; }
.listen-feedback strong span { margin-left:5px; font-size:.82rem; opacity:.7; }
.listen-feedback p { margin:6px 0 2px; font-weight:750; }
.listen-feedback small { display:block; opacity:.72; }
@keyframes listenFeedbackIn { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:none; } }
@keyframes listenSlideIn { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
#listen-score { display:none!important; }
.listen-admin-layout { display:flex; gap:20px; height:70vh; min-height:500px; }
.listen-admin-sidebar,.listen-admin-content { background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.listen-admin-sidebar { flex:1; min-width:250px; max-width:350px; }
.listen-admin-content { flex:2; }
.listen-admin-sidebar>header,.listen-admin-content>header { padding:15px; background:#f8fafc; border-bottom:1px solid #e2e8f0; display:flex; justify-content:space-between; align-items:center; }
.listen-admin-sidebar h3,.listen-admin-content h2,.listen-admin-content p { margin:0; color:#334155; }
.listen-admin-sidebar>header button { background:#10b981; color:#fff; border:0; border-radius:8px; padding:6px 10px; cursor:pointer; }
.listen-admin-folder-list,.listen-admin-activity-list { padding:10px; overflow:auto; }
.listen-admin-folder { padding:12px; border-left:4px solid transparent; border-radius:8px; display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:#334155; }
.listen-admin-folder>span { display:flex; align-items:center; gap:8px; }
.listen-admin-folder.active { border-left-color:var(--folder-color); background:color-mix(in srgb, var(--folder-color) 10%, white); color:var(--folder-color); font-weight:800; }
.listen-admin-folder-actions button { border:0; background:transparent; color:#64748b; cursor:pointer; padding:3px; }
.listen-admin-activity { padding:14px; margin-bottom:10px; border:1px solid #e2e8f0; border-left:5px solid #3b82f6; border-radius:9px; display:flex; justify-content:space-between; align-items:center; }
.listen-admin-activity h3,.listen-admin-activity p { margin:0; color:#334155; }
.listen-admin-activity p { color:#64748b; font-size:.85rem; margin-top:4px; }
.listen-admin-empty { padding:30px; text-align:center; color:#94a3b8; }
.listen-admin-modal-content { width:min(920px, 94vw); max-width:920px; max-height:90vh; overflow:auto; }
.listen-admin-modal-header { display:flex; justify-content:space-between; align-items:center; }
.listen-admin-form { display:grid; gap:14px; }
.listen-admin-form label { display:grid; gap:5px; color:#475569; font-weight:700; }
.listen-admin-form input { padding:11px; border:1px solid #cbd5e1; border-radius:8px; }
.listen-admin-json { display:block!important; width:100%; min-height:320px; box-sizing:border-box; padding:14px; border:3px solid #3b82f6!important; border-radius:10px; font-family:monospace; background:#0f172a!important; color:#fff!important; -webkit-text-fill-color:#fff!important; caret-color:#fff!important; opacity:1!important; }
.listen-template-json { min-height:230px; color:#cbd5e1!important; -webkit-text-fill-color:#cbd5e1!important; }
.listen-json-section { display:grid; gap:10px; padding:15px; border:1px solid #dbe3ee; border-radius:12px; background:#f8fafc; }
.listen-result-section { border-color:#93c5fd; background:#eff6ff; }
.listen-json-validation { font-size:.85rem; font-weight:800; color:#b45309; }
.listen-json-validation.valid { color:#059669; }
.listen-admin-modal [data-save]:disabled { opacity:.4; cursor:not-allowed; }
.listen-json-label { display:grid; gap:8px; margin-top:12px; color:#334155; font-weight:800; }
.listen-admin-help { color:#64748b; }
.listen-activity-form { display:grid; gap:22px; color:#334155; }
.listen-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.listen-activity-form label { display:grid; gap:6px; font-weight:700; color:#475569; }
.listen-activity-form input,.listen-activity-form select,.listen-activity-form textarea { width:100%; box-sizing:border-box; padding:11px; border:1px solid #cbd5e1; border-radius:8px; background:#fff; color:#0f172a; font:inherit; }
.listen-activity-form textarea { min-height:110px; resize:vertical; }
.listen-media-fields { display:grid; gap:13px; padding:16px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; }
.listen-media-fields h3,.listen-questions-heading h3 { margin:0; color:#1e293b; }
.listen-language-srt { display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px; border:1px solid #dbe3ee; border-radius:10px; background:#fff; }
.listen-srt-head { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; }
.listen-srt-head small { color:#64748b; }
.listen-language-srt input[type="file"] { grid-column:1/-1; padding:8px; background:#f8fafc; }
.listen-language-srt textarea { display:block!important; min-height:96px; resize:vertical; background:#0f172a!important; color:#fff!important; -webkit-text-fill-color:#fff!important; caret-color:#fff!important; border:2px solid #3b82f6!important; opacity:1!important; }
.listen-language-srt textarea::placeholder { color:#94a3b8!important; -webkit-text-fill-color:#94a3b8!important; opacity:1!important; }
.listen-language-srt textarea:focus { outline:3px solid rgba(59,130,246,.25)!important; border-color:#60a5fa!important; }
.listen-language-srt button { align-self:stretch; white-space:nowrap; }
.listen-file-label { padding:12px; border:1px dashed #94a3b8; border-radius:9px; background:#fff; }
.listen-file-label small,.listen-questions-heading small { color:#64748b; font-weight:400; }
.listen-image-preview { min-height:130px; display:flex; align-items:center; justify-content:center; gap:8px; overflow:hidden; border-radius:10px; background:#e2e8f0; color:#64748b; }
.listen-image-preview img { width:100%; max-height:240px; object-fit:cover; }
.listen-checkbox { display:flex !important; grid-template-columns:auto 1fr; align-items:center; justify-content:start; }
.listen-checkbox input { width:auto; }
.listen-questions-heading,.listen-question-editor-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.listen-json-actions { display:flex; gap:8px; flex-wrap:wrap; }
.listen-srt-preview { margin-top:12px; border:1px solid #cbd5e1; border-radius:9px; background:#f8fafc; color:#334155; }
.listen-srt-preview summary { padding:12px; cursor:pointer; font-weight:800; }
.listen-srt-preview pre { max-height:260px; overflow:auto; margin:0; padding:14px; border-top:1px solid #cbd5e1; white-space:pre-wrap; background:#fff; color:#0f172a; }
.listen-question-editor { display:grid; gap:12px; margin-top:14px; padding:16px; border:1px solid #cbd5e1; border-left:5px solid #3b82f6; border-radius:10px; background:#fff; }
.listen-question-editor-head button { color:#ef4444; }
.listen-options-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.listen-options-grid label { padding:10px; border-radius:8px; background:#f8fafc; }
.listen-options-grid input+input { margin-top:5px; }
@media (max-width:900px) { .listen-player { grid-template-columns:1fr; } .listen-reference-frame { height:150px; } .listen-admin-layout { flex-direction:column; height:auto; } .listen-admin-sidebar { max-width:none; } }
@media (max-width:640px) { .listen-form-grid,.listen-options-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .listen-language-srt { grid-template-columns:1fr; } .listen-language-srt textarea,.listen-language-srt button { grid-column:1; } }

/* Editorial neo-brutalist theme */
#listen-answer-screen {
  --la-ink:#20231f;
  --la-paper:#f6f0df;
  --la-warm:#fff9eb;
  --la-coral:#ff6b4a;
  --la-sun:#f4c84a;
  --la-mint:#71d7b3;
  --la-sky:#79b8ff;
  --la-lavender:#bba5ff;
  --la-shadow:5px 5px 0 var(--la-ink);
  font-family:Inter,system-ui,sans-serif;
}
#listen-answer-screen {
  color:var(--la-ink);
  background-color:var(--la-paper);
  background-image:radial-gradient(color-mix(in srgb,var(--la-ink) 16%,transparent) 1px,transparent 1px);
  background-size:18px 18px;
}
#listen-answer-screen .top-bar { background:var(--la-warm); color:var(--la-ink); border-bottom:2px solid var(--la-ink); box-shadow:0 4px 0 var(--la-ink); }
#listen-answer-screen .btn-icon { background:var(--la-sun); color:var(--la-ink); border:2px solid var(--la-ink); border-radius:12px; box-shadow:3px 3px 0 var(--la-ink); }
#listen-answer-screen .levels-grid .level-card,
#listen-answer-screen .book-card { border:2px solid var(--la-ink)!important; border-radius:18px; box-shadow:var(--la-shadow); color:var(--la-ink); background:var(--la-warm); transition:transform .15s,box-shadow .15s; }
#listen-answer-screen .levels-grid .level-card,
#listen-answer-screen .levels-grid .level-card *,
#listen-answer-screen .book-card,
#listen-answer-screen .book-card * { color:#20231f!important; }
#listen-answer-screen .levels-grid .level-card:nth-child(5n+1),#listen-answer-screen .book-card:nth-child(5n+1){background:var(--la-coral)}
#listen-answer-screen .levels-grid .level-card:nth-child(5n+2),#listen-answer-screen .book-card:nth-child(5n+2){background:var(--la-sun)}
#listen-answer-screen .levels-grid .level-card:nth-child(5n+3),#listen-answer-screen .book-card:nth-child(5n+3){background:var(--la-mint)}
#listen-answer-screen .levels-grid .level-card:nth-child(5n+4),#listen-answer-screen .book-card:nth-child(5n+4){background:var(--la-sky)}
#listen-answer-screen .levels-grid .level-card:nth-child(5n),#listen-answer-screen .book-card:nth-child(5n){background:var(--la-lavender)}
#listen-answer-screen .level-card:hover,#listen-answer-screen .book-card:hover { transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--la-ink); }
#listen-answer-screen .level-card:active,#listen-answer-screen .book-card:active { transform:translate(4px,4px); box-shadow:1px 1px 0 var(--la-ink); }
.listen-audio-card,.listen-quiz { background:var(--la-warm); color:var(--la-ink); border:2px solid var(--la-ink); border-radius:20px; box-shadow:var(--la-shadow); }
.listen-reference-frame { background:var(--la-paper); border:2px solid var(--la-ink); border-radius:14px; }
.listen-audio-card audio { border:2px solid var(--la-ink); border-radius:999px; }
.listen-tool,.listen-nav,.listen-quiz .btn-primary { border:2px solid var(--la-ink); box-shadow:3px 3px 0 var(--la-ink); color:var(--la-ink); }
.listen-tool:nth-child(1){background:var(--la-sky)} .listen-tool:nth-child(2){background:var(--la-lavender)} .listen-tool:nth-child(3){background:var(--la-mint)}
.listen-tool,.listen-tool *,.listen-nav,.listen-nav * { color:#20231f!important; }
.listen-tool:hover,.listen-nav:hover { color:var(--la-ink); border-color:var(--la-ink); transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--la-ink); }
.listen-tool:active,.listen-nav:active { transform:translate(3px,3px); box-shadow:none; }
.listen-nav { background:var(--la-sun); }
.listen-question label { border:2px solid var(--la-ink); border-radius:12px; background:#fff; color:var(--la-ink); }
.listen-question label:has(input:checked) { border-color:var(--la-ink); background:var(--la-sky); color:var(--la-ink); box-shadow:3px 3px 0 var(--la-ink); }
.listen-subtitle { background:var(--la-ink); color:var(--la-warm); border:2px solid var(--la-ink); }
.listen-english { background:var(--la-lavender); color:#20231f!important; border:2px solid var(--la-ink); }
.listen-dot { border:1px solid var(--la-ink); background:var(--la-paper); }
.listen-dot.active { background:var(--la-coral); }

[data-theme="dark"] #listen-answer-screen {
  --la-ink:#f7f2e5;
  --la-paper:#171a18;
  --la-warm:#222622;
  --la-shadow:5px 5px 0 #050605;
}
[data-theme="dark"] #listen-answer-screen .top-bar { background:#222622; box-shadow:0 4px 0 #050605; }
[data-theme="dark"] .listen-question label { background:#2d322e; color:#f7f2e5; }
#listen-answer-screen .listen-question label.answer-correct { background:var(--la-mint)!important; color:#20231f!important; border:2px solid var(--la-ink)!important; box-shadow:3px 3px 0 var(--la-ink); }
#listen-answer-screen .listen-question label.answer-incorrect { background:color-mix(in srgb,var(--la-coral) 55%,var(--la-warm))!important; color:var(--la-ink)!important; border:2px solid var(--la-ink)!important; box-shadow:3px 3px 0 var(--la-ink); }
#listen-answer-screen .listen-feedback,#listen-answer-screen .listen-feedback * { color:#20231f!important; }

@media (max-width:900px) {
  #listen-answer-screen { background-size:14px 14px; }
  .listen-audio-card,.listen-quiz { border-radius:16px; box-shadow:4px 4px 0 var(--la-ink); }
  .listen-hero-media .listen-reference-frame { height:190px; }
  .listen-admin-modal-content { width:94vw; }
  .listen-feedback-card { padding:16px; }
  .listen-feedback p,.listen-feedback small { display:none; }
}
@media (max-width:520px) {
  .listen-custom-player { grid-template-columns:44px 1fr 38px; gap:8px; }
  .listen-custom-player .listen-time { display:none; }
  .listen-play { width:42px; height:42px; }
  .listen-tool span:last-child { display:none; }
  .listen-tool { min-width:42px; justify-content:center; }
}
.home-buttons>.btn-start { width:100%!important; min-width:0!important; box-sizing:border-box!important; }
.home-buttons .btn-listen-answer-main { background:#71d7b3!important; border-color:#20231f!important; color:#171719!important; -webkit-text-fill-color:#171719!important; }
.home-buttons .btn-listen-answer-main * { color:#171719!important; -webkit-text-fill-color:#171719!important; }