.lesson-panel { width: min(760px, 100%); }
.lesson-list { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0; }
.lesson-list button { padding: 10px 12px; border: 1px solid #d5e1ef; border-radius: 9px; background: #f6f9fd; color: #17304d; font: inherit; font-size: .85rem; cursor: pointer; }
.lesson-list button[aria-pressed="true"] { background: #1257b0; color: white; }
.lesson-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; color: #435d78; padding: 12px 0 24px; }
.lesson-resource { display: block; margin: 12px 0; color: #1257b0; font-weight: 700; }
.lesson-player { display: block; width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; margin: 20px 0; background: #eef4fb; }
.learning-demo { background: #fff5d9; color: #765300; border: 1px solid #eddca8; border-radius: 9px; padding: 12px; font-size: .85rem; }
.learning-notice, #editor-message { color: #a23629; line-height: 1.5; }
.dialog-message { color: #a23629; line-height: 1.5; }
.studio-entry { display:inline-flex;align-items:center;justify-content:center;padding:13px 17px;border:1px solid #bcd3ee;border-radius:11px;background:#eaf3ff;color:#1257b0;text-decoration:none;font-size:.85rem;font-weight:750; }
.quiz-question { min-width: 0; border: 1px solid #dbe5ef; border-radius: 12px; padding: 18px; }
.quiz-question legend { font-weight: 750; line-height: 1.6; padding: 0 6px; }
.quiz-question label { display: flex; align-items: baseline; gap: 9px; padding: 10px 0; font-weight: 400; line-height: 1.6; }
.quiz-question input, .inline-check input { width: auto; flex-shrink: 0; }
#quiz-result { line-height: 1.7; color: #1257b0; }
.learning-editor { width: min(900px, calc(100% - 30px)); max-height: calc(100% - 40px); border: 0; border-radius: 18px; color: #17304d; padding: 30px; }
.learning-editor::backdrop { background: #102b49aa; }
.learning-editor-help { color: #61748b; line-height: 1.7; }
.learning-editor button { font: inherit; border: 1px solid #c9d9eb; border-radius: 8px; padding: 10px 14px; cursor: pointer; background: #f1f6fd; color: #1257b0; }
.learning-editor .admin-primary { background: #1257b0; color: #fff; }
.learning-editor label { display: grid; gap: 7px; line-height: 1.6; margin-bottom: 12px; }
.learning-editor textarea { width: 100%; font: inherit; padding: 12px; border: 1px solid #d4e0ec; border-radius: 9px; resize: vertical; color: #17304d; }
.editor-item { position: relative; padding: 50px 20px 20px; border: 1px solid #dce6ef; border-radius: 12px; margin: 16px 0; background: #fafcff; }
.remove-editor-item { position: absolute; right: 12px; top: 12px; }
.inline-check { display: flex !important; gap: 10px; align-items: center; }
.editor-toolbar { display: flex; gap: 12px; flex-wrap: wrap; }
.roster-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 20px 0; }
.roster-actions a { color: #1257b0; font-weight: 700; font-size: .88rem; }
.roster-actions p { flex-basis: 100%; line-height: 1.7; color: #4e6b88; }
.organization-filter { max-width: 400px; margin-bottom: 20px; }
.organization-filter select { padding: 12px; border: 1px solid #d5e1ef; border-radius: 9px; color: #17304d; font: inherit; background: white; }
.admin-profile .locale { margin: 0; align-self: center; }
.learning-editor [hidden] { display: none !important; }
@media(max-width: 620px) { .learning-editor { padding: 20px 14px; } .lesson-panel { padding: 22px; } .editor-item { padding: 50px 14px 14px; } }
/* Keep navigation and both languages reachable on phones. */
@media(max-width: 1180px) {
 .home-header { grid-template-columns:1fr auto; height:auto; padding-top:12px; padding-bottom:0; gap:8px 16px; }
 .home-header .home-nav { display:flex; grid-column:1/-1; grid-row:2; justify-content:flex-start; overflow-x:auto; min-width:0; gap:22px; padding:12px 0; }
 .home-nav a { white-space:nowrap; }
}
@media(max-width: 620px) {
 .home-header { padding-left:14px; padding-right:14px; column-gap:8px; }
 .home-header .home-logo img { width:104px; }
 .home-header-actions { gap:2px; }
 .home-header .home-lang { display:inline-block; padding:6px 5px; font-size:.7rem; }
 .home-header .home-login { padding:10px 8px; font-size:.74rem; }
 .home-header .home-whatsapp { padding:7px; }
 .home-header .home-nav a { font-size:.78rem; }
}
@media(max-width: 360px) { .home-header .home-logo img { width:88px; } .home-header { padding-inline:10px; } }