/* Classes, the join page and the teacher's page (Pages/classes). */
.cl-page { max-width: 760px; margin: 0 auto; display: grid; gap: 1rem; }
.cl-page.cl-narrow { max-width: 560px; margin-top: 1rem; }
.cl-page.cl-wide { max-width: 1000px; }

.cl-head h1 { margin: 0; }
.cl-sub { color: #6b6b6b; margin: .25rem 0 0; }
.cl-crumb { margin: 0; font-size: .9rem; }

.cl-card {
    border: 2px solid #2b2b2b;
    border-radius: 14px 6px 14px 6px;
    background: #fff;
    box-shadow: 3px 3px 0 #2b2b2b;
    padding: 1rem 1.2rem;
}
.cl-card h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
.cl-card h2 { font-size: 1.2rem; margin: 0 0 .6rem; }
.cl-card h1 .bi, .cl-card h2 .bi { color: #0d6efd; }
.cl-card p { margin: 0 0 .6rem; }
.cl-card p:last-child { margin-bottom: 0; }

.cl-title { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cl-title h2 { margin: 0; }
.cl-badge { border: 2px dashed #2b2b2b; border-radius: 8px; padding: .05rem .5rem; font-size: .8rem; font-weight: bold; }
.cl-meta { color: #6b6b6b; font-size: .9rem; }
.cl-empty { color: #6b6b6b; }
.cl-error { color: #b02a37; }
.cl-gift { font-weight: bold; }
.cl-gift .bi { color: #0d6efd; }
.cl-privacy { font-size: .9rem; color: #555; background: #f7f7f7; border-radius: 8px; padding: .6rem .75rem; }
.cl-notice { margin: 0; padding: .55rem .8rem; border: 2px solid #146c43; border-radius: 8px; color: #146c43; background: #eaf6ef; }
.cl-notice.error { border-color: #b02a37; color: #b02a37; background: #fbecee; }

.cl-btn {
    display: inline-flex; align-items: center; gap: .35rem;
    border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; background: #ffd84d; box-shadow: 2px 2px 0 #2b2b2b;
    padding: .4rem .9rem; font: inherit; font-weight: bold; color: #2b2b2b; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.cl-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.cl-link { border: none; background: transparent; padding: 0; font: inherit; color: #0d6efd; text-decoration: underline; cursor: pointer; }
.cl-link.danger { color: #b02a37; }
.cl-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.cl-join { display: flex; gap: .5rem; flex-wrap: wrap; }
.cl-join input, .cl-assign input, .cl-invite input {
    border: 2px solid #2b2b2b; border-radius: 8px; padding: .4rem .65rem; font: inherit; min-width: 0;
}
.cl-join input { flex: 1 1 220px; text-transform: uppercase; letter-spacing: .06em; font-family: ui-monospace, Consolas, monospace; }
.cl-join input::placeholder { text-transform: none; letter-spacing: 0; font-family: inherit; }

.cl-code { font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; font-weight: bold; }
.cl-code.big { font-size: 1.6rem; border: 2px dashed #2b2b2b; border-radius: 8px; padding: .1rem .6rem; }
.cl-invite { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cl-invite input { flex: 1 1 260px; color: #444; background: #f7f7f7; }
.cl-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cl-check { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.cl-check input { width: 18px; height: 18px; }

.cl-homework { list-style: none; padding: 0; margin: 0; }
.cl-homework > li { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; align-items: center; padding: .65rem 0 .65rem .7rem; border-top: 1px dashed #d7d7d7; border-left: 4px solid #d7d7d7; }
.cl-homework > li:first-child { border-top: none; }
.cl-homework > li.hw-done { border-left-color: #198754; }
.cl-homework > li.hw-started { border-left-color: #f0ad00; }
.cl-homework > li.hw-late { border-left-color: #dc3545; }
.hw-main small { display: block; color: #6b6b6b; }
.hw-main .hw-note { color: #333; font-style: italic; }
.hw-links { display: flex; gap: .9rem; white-space: nowrap; }
.hw-links a { font-weight: bold; text-decoration: none; }
.hw-progress { display: flex; align-items: center; gap: .8rem; white-space: nowrap; }
.hw-count { font-weight: bold; font-variant-numeric: tabular-nums; }
.cl-homework.teacher > li { border-left-color: #0d6efd; }
.cl-leave { margin-top: .8rem !important; font-size: .9rem; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }

.cl-assign { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.cl-assign label { display: inline-flex; align-items: center; gap: .35rem; }
.cl-assign .cl-note { flex: 1 1 200px; }
.cl-picker { position: relative; flex: 2 1 280px; }
.cl-picker input { width: 100%; }
.cl-options { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); list-style: none; margin: 0; padding: .25rem 0; background: #fff; border: 2px solid #2b2b2b; border-radius: 8px; max-height: 260px; overflow-y: auto; box-shadow: 3px 3px 0 #2b2b2b; }
.cl-options li { padding: .35rem .7rem; cursor: pointer; }
.cl-options li:hover { background: #fff6cc; }

/* Plain tables here: the site's sketch table style (app.css) is for search results. */
.cl-page table { border-collapse: collapse; border-spacing: 0; margin: 0; width: 100%; }
.cl-page table th { border-bottom: 2px solid #2b2b2b; padding: .4rem .5rem; font-size: .8rem; color: #555; white-space: nowrap; }
.cl-page table td { border: 0; border-top: 1px dashed #d7d7d7; border-radius: 0 !important; padding: .45rem .5rem; background: transparent; }
.cl-page table tbody tr:hover td { transform: none; box-shadow: none; }
.cl-page table td strong, .cl-page table td small { display: block; }
.cl-page table td small { color: #6b6b6b; }
.cl-table-wrap { overflow-x: auto; }
.cl-results { grid-column: 1 / -1; margin-top: .4rem !important; font-size: .9rem; }
.cl-results tr.hw-done td:nth-child(2) { color: #146c43; font-weight: bold; }
.cl-results tr.hw-started td:nth-child(2) { color: #85520f; }

@media (max-width: 560px) {
    .cl-homework > li { grid-template-columns: 1fr; }
}

/* "Coming soon" in place of a page that is switched off (Components/FeatureGate.razor). */
.feature-off { max-width: 560px; margin: 2rem auto; text-align: center; border: 2px dashed #2b2b2b; border-radius: 14px; padding: 1.5rem; background: #fff; }
.feature-off h1 { font-size: 1.6rem; margin: 0 0 .4rem; }

/* My library (Pages/library/MyLibrary.razor) */
.lib-titles { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .5rem; }
.lib-titles li { display: flex; align-items: center; gap: .5rem; }
.lib-title { flex: 1; display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem; border: 2px solid #2b2b2b; border-radius: 10px; color: #2b2b2b; text-decoration: none; background: #fffdf3; }
.lib-title:hover { background: #fff6cc; }
.lib-title > .bi { font-size: 1.5rem; color: #0d6efd; }
.lib-title strong { font-size: 1.05rem; }
.lib-title small { display: block; color: #6b6b6b; }
.lib-requests { list-style: none; padding: 0; margin: 0; }
.lib-requests li { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; align-items: center; padding: .65rem 0 .65rem .7rem; border-top: 1px dashed #d7d7d7; border-left: 4px solid #d7d7d7; }
.lib-requests li:first-child { border-top: none; }
.lib-requests li.req-quoted { border-left-color: #f0ad00; }
.lib-requests li.req-paid { border-left-color: #0d6efd; }
.lib-requests li.req-ready { border-left-color: #198754; }
.lib-requests li.req-rejected, .lib-requests li.req-cancelled { border-left-color: #b3b3b3; color: #777; }
.req-main small { display: block; color: #6b6b6b; }
.req-main .req-reply { color: #333; margin-top: .2rem; }
.req-side { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.req-status { font-weight: bold; }
.req-price { font-weight: bold; font-variant-numeric: tabular-nums; }
.lib-howtopay { margin-top: .8rem; padding: .7rem .8rem; background: #f7f7f7; border-radius: 8px; }
.lib-howtopay p { white-space: pre-line; unicode-bidi: plaintext; }
.lib-form { display: grid; grid-template-columns: 1fr 160px; gap: .7rem 1rem; align-items: end; }
.lib-form .wide, .lib-form .lib-kinds, .lib-form > button { grid-column: 1 / -1; }
.lib-form > button { justify-self: start; }
.lib-form label { display: grid; gap: .25rem; font-weight: bold; }
.lib-form label.cl-check { display: inline-flex; font-weight: normal; }
.lib-form input:not([type=checkbox]):not([type=radio]), .lib-form textarea { border: 2px solid #2b2b2b; border-radius: 8px; padding: .4rem .65rem; font: inherit; font-weight: normal; }
.lib-kinds { border: 0; padding: 0; margin: 0; }
.lib-kind-options { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.lib-kinds legend { font-weight: bold; margin-bottom: .3rem; font-size: 1rem; }
.lib-kinds label { display: flex; gap: .6rem; align-items: flex-start; border: 2px solid #d0d0d0; border-radius: 10px; padding: .6rem .7rem; cursor: pointer; font-weight: normal; }
.lib-kinds label.on { border-color: #2b2b2b; background: #fffbea; }
.lib-kinds input { margin-top: .3rem; }
.lib-kinds small { display: block; color: #555; }
.lib-kinds .lib-price { color: #146c43; font-weight: bold; margin-top: .2rem; }
@media (max-width: 560px) {
    .lib-form, .lib-kind-options { grid-template-columns: 1fr; }
    .lib-requests li { grid-template-columns: 1fr; }
    .req-side { justify-content: flex-start; }
}

/* Class films, film requests (TeachClass.razor, MyClasses.razor) */
.cl-split { justify-content: space-between; }
.cl-subhead { font-size: 1rem; margin: 1rem 0 .4rem; display: flex; align-items: baseline; gap: .4rem; }
.cl-subhead .bi { color: #0d6efd; }
.cl-subhead small { color: #6b6b6b; font-weight: normal; font-size: .85rem; }
.cl-badge.warn { border-color: #b26b00; color: #85520f; }
.cl-warn { color: #85520f; }
.cl-btn.small { padding: .2rem .6rem; font-size: .9rem; }
.cl-notice.warn { border-color: #b26b00; color: #6b4300; background: #fff6df; }
.cl-block { display: grid; gap: .25rem; font-weight: bold; }
.cl-block small { font-weight: normal; color: #6b6b6b; }
.cl-block input, .cl-block textarea, .cl-block select, .cl-request-grid input:not([type=checkbox]) { border: 2px solid #2b2b2b; border-radius: 8px; padding: .4rem .65rem; font: inherit; font-weight: normal; min-width: 0; width: 100%; box-sizing: border-box; }

.cl-film { border: 2px solid #2b2b2b; border-radius: 10px; padding: .6rem .8rem; margin-top: .7rem; background: #fffdf3; }
.cl-film > header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cl-film > header strong { font-size: 1.05rem; }
.cl-film-open { margin-left: auto; font-size: .9rem; }
.cl-film-episodes { list-style: none; margin: .4rem 0 0; padding: 0; }
.cl-film-episodes li { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; padding: .45rem 0; border-top: 1px dashed #d7d7d7; }
.cl-film-episodes li small { display: flex; flex-wrap: wrap; gap: .2rem .8rem; color: #6b6b6b; margin-top: .1rem; }
.cl-film-episodes li small .bi { color: #0d6efd; }
.cl-film-actions { display: flex; align-items: center; gap: .8rem; }

.cl-request { border: 2px dashed #2b2b2b; border-radius: 10px; padding: .8rem; margin: .6rem 0; background: #fffef8; display: grid; gap: .7rem; }
.cl-request h3 { font-size: 1.05rem; margin: 0; }
.cl-request-grid { display: grid; grid-template-columns: 1fr 120px auto; gap: .6rem 1rem; align-items: end; }
.cl-request-grid label:not(.cl-check) { display: grid; gap: .25rem; font-weight: bold; }
.cl-kind { border: 0; padding: 0; margin: 0; }
.cl-kind-options { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.cl-kind legend { font-weight: bold; margin-bottom: .3rem; font-size: 1rem; }
.cl-kind label { display: grid; grid-template-columns: auto 1fr; column-gap: .55rem; border: 2px solid #d0d0d0; border-radius: 10px; padding: .55rem .7rem; cursor: pointer; }
.cl-kind label.on { border-color: #2b2b2b; background: #fffbea; }
.cl-kind input { grid-row: span 3; margin-top: .3rem; }
.cl-kind span { color: #555; font-size: .9rem; }
.cl-kind small { color: #146c43; font-weight: bold; }

.cl-requests { list-style: none; padding: 0; margin: 0; }
.cl-requests li { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; align-items: center; padding: .55rem 0 .55rem .7rem; border-top: 1px dashed #d7d7d7; border-left: 4px solid #d7d7d7; }
.cl-requests li:first-child { border-top: none; }
.cl-requests li.rq-quoted { border-left-color: #f0ad00; }
.cl-requests li.rq-paid { border-left-color: #0d6efd; }
.cl-requests li.rq-ready { border-left-color: #198754; }
.cl-requests li.rq-rejected, .cl-requests li.rq-cancelled { color: #777; }
.cl-requests small { display: block; color: #6b6b6b; }
.cl-requests .cl-reply { color: #333; margin-top: .15rem; }
.cl-chip { display: inline-block; margin-left: .4rem; padding: 0 .45rem; border-radius: 999px; font-size: .78rem; font-weight: bold; background: #eee; color: #555; }
.cl-chip.rq-quoted { background: #fff0c2; color: #7a5200; }
.cl-chip.rq-paid { background: #dbe8ff; color: #0b4cbc; }
.cl-chip.rq-ready { background: #d8f0e2; color: #146c43; }
.cl-request-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; justify-content: flex-end; }
.cl-price { font-variant-numeric: tabular-nums; }

/* The teacher's quiz / vocabulary / grammar editor (ClassStudy.razor) */
.cs-tabs { display: flex; gap: .5rem; flex-wrap: wrap; }
.cs-tabs button { border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; background: #fff; padding: .4rem .9rem; font: inherit; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.cs-tabs button span { background: #eee; border-radius: 999px; padding: 0 .45rem; font-size: .8rem; }
.cs-tabs button.on { background: #ffd84d; box-shadow: 2px 2px 0 #2b2b2b; }
.cs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.cs-toolbar .cl-meta { margin: 0; }
.cs-empty { color: #6b6b6b; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.cs-empty p { margin: 0; }
.cs-footer { margin: .8rem 0 0 !important; padding-top: .6rem; border-top: 1px dashed #d7d7d7; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; font-size: .92rem; }
.cs-job { display: flex; align-items: center; gap: .5rem; color: #0b4cbc; font-weight: bold; }
@keyframes cs-spin { to { transform: rotate(360deg); } }
.cs-spin { width: 14px; height: 14px; border: 2px solid #0b4cbc; border-right-color: transparent; border-radius: 50%; animation: cs-spin .8s linear infinite; }
.cs-level { display: inline-block; font-size: .72rem; font-weight: bold; text-transform: uppercase; letter-spacing: .03em; color: #555; border: 1px solid #bbb; border-radius: 4px; padding: 0 .3rem; vertical-align: middle; }
.cs-row-actions { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; font-size: .92rem; }

.cs-questions { margin: 0; padding-left: 1.6rem; }
.cs-questions > li { padding: .7rem 0; border-top: 1px dashed #d7d7d7; }
.cs-questions > li:first-child { border-top: none; }
.cs-questions > li::marker { font-weight: bold; }
.cs-q-text { font-weight: bold; margin-bottom: .35rem; }
.cs-options { list-style: none; padding: 0; margin: 0 0 .4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .8rem; }
.cs-options li { padding: .2rem .45rem; border-radius: 6px; }
.cs-options li b { color: #777; margin-right: .3rem; }
.cs-options li.right { background: #d8f0e2; font-weight: bold; }
.cs-options li.right .bi { color: #146c43; margin-left: .3rem; }
.cs-explain { color: #444; font-size: .92rem; margin: 0 0 .3rem !important; }
.cs-explain .bi { color: #c98a00; }

.cs-form { display: grid; gap: .6rem; border: 2px dashed #2b2b2b; border-radius: 10px; padding: .8rem; background: #fffef8; margin-bottom: .6rem; }
.cs-form-row { display: flex; gap: .6rem 1rem; flex-wrap: wrap; }
.cs-form-row .grow { flex: 1 1 220px; }
.cs-option-inputs { border: 0; padding: 0; margin: 0; }
.cs-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .8rem; }
.cs-option-inputs legend { font-weight: bold; margin-bottom: .3rem; font-size: 1rem; }
.cs-option-inputs label { display: flex; align-items: center; gap: .45rem; border: 2px solid #d0d0d0; border-radius: 8px; padding: .25rem .5rem; }
.cs-option-inputs label.right { border-color: #198754; background: #eef9f2; }
.cs-option-inputs input:not([type=radio]) { flex: 1; border: 0; font: inherit; min-width: 0; background: transparent; padding: .2rem 0; }
.cs-option-inputs input:not([type=radio]):focus { outline: none; }
.cs-option-inputs label:focus-within { border-color: #2b2b2b; }

.cs-phrases, .cs-grammar { list-style: none; margin: 0; padding: 0; }
.cs-phrases > li { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr auto; gap: .3rem 1rem; align-items: start; padding: .55rem 0; border-top: 1px dashed #d7d7d7; }
.cs-phrases > li.editing, .cs-questions > li.editing { display: block; }
.cs-phrases > li:first-child, .cs-grammar > li:first-child { border-top: none; }
.cs-term small { display: block; color: #6b6b6b; font-size: .82rem; }
.cs-meaning { display: grid; gap: .1rem; }
.cs-meaning em, .cs-grammar em { color: #555; font-size: .92rem; }
.cs-fa { color: #333; }
.cs-grammar-add { display: flex; gap: .6rem 1rem; align-items: center; flex-wrap: wrap; margin-bottom: .6rem; }
.cs-grammar-add .cl-picker input { border: 2px solid #2b2b2b; border-radius: 8px; padding: .4rem .65rem; font: inherit; width: 100%; box-sizing: border-box; }
.cl-options li small { color: #6b6b6b; margin-left: .3rem; }
.cs-grammar > li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-top: 1px dashed #d7d7d7; }
.cs-grammar > li small { color: #6b6b6b; margin-left: .3rem; }
.cs-grammar em { display: block; margin-top: .15rem; }

@media (max-width: 640px) {
    .cl-request-grid, .cl-kind-options, .cs-options, .cs-option-grid { grid-template-columns: 1fr; }
    .cs-phrases > li { grid-template-columns: 1fr; }
    .cl-requests li { grid-template-columns: 1fr; }
    .cl-request-actions { justify-content: flex-start; }
    .cl-film-open { margin-left: 0; }
}

/* Generated content waiting for the teacher's review */
.cs-drafts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
    .cs-drafts > span:first-child { flex: 1 1 260px; }
.cs-draft-actions { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cs-questions > li.draft, .cs-phrases > li.draft { border-left: 3px solid #e0a800; background: #fffbea; }
.cs-new { display: inline-block; margin-right: .35rem; padding: 0 .4rem; border-radius: 999px; background: #e0a800; color: #fff; font-size: .72rem; font-weight: 700; text-transform: uppercase; vertical-align: 2px; }

/* Homework rules, statuses and the student's checklist. */
.cl-homework > li.hw-practice { border-left-color: #b26b00; }
.cl-results tr.hw-practice td:nth-child(2) { color: #85520f; font-weight: bold; }
.cl-chip.hw-practice { background: #fff0c2; color: #7a5200; }
.cl-chip.hw-late { background: #fbe0e3; color: #a52834; }
.cl-require { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; border: 0; padding: 0; margin: 0; flex-basis: 100%; }
.cl-require legend { float: left; font-size: .85rem; color: #555; margin: 0 .3rem 0 0; padding: 0; width: auto; }
.cl-score input { width: 4.5rem; margin: 0 .25rem; }
.hw-steps span { color: #b5b5b5; margin-right: .35rem; }
.hw-steps span.met { color: #146c43; }
.hw-checklist { list-style: none; padding: 0; margin: .35rem 0 0; font-size: .9rem; }
.hw-checklist li { padding-left: 1.4rem; position: relative; }
.hw-checklist li::before { content: "○"; position: absolute; left: .2rem; color: #888; }
.hw-checklist li.met::before { content: "✓"; color: #146c43; font-weight: bold; }
.hw-checklist li.met a { color: #6b6b6b; text-decoration: line-through; }
.hw-checklist small { display: inline; margin-left: .4rem; color: #6b6b6b; }
.cl-next { border-left: 6px solid #0d6efd; }
.cl-next.hw-practice { border-left-color: #b26b00; }
.cl-next.hw-late { border-left-color: #dc3545; }
.cl-next-label { font-size: .85rem; font-weight: bold; color: #555; margin: 0 0 .2rem; }
.cl-next h2 { margin: 0 0 .3rem; }
.cl-next .cl-btn { margin-top: .6rem; }
.cl-done-list { margin-top: .6rem; }
.cl-done-list summary { cursor: pointer; font-weight: bold; color: #555; }

/* ---------- Lesson studio (Pages/classes/LessonStudio.razor): watch, pick words, add to the lesson ---------- */
.ls { --k-grammar: #7048e8; --k-grammar-bg: #f1ecff; --k-collocation: #0c8599; --k-collocation-bg: #e3f6f8; --k-phrase: #d9480f; --k-phrase-bg: #fff1e6;
      display: grid; gap: 1.5rem; }
/* The sticky player is held inside this row, so it never slides over "In this lesson" below. */
.ls-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ls-stage { display: grid; gap: 1rem; position: sticky; top: .75rem; }
.ls-lesson { border-top: 2px dashed #d7d7d7; padding-top: 1.2rem; }
.ls .k-grammar { --k: var(--k-grammar); --kbg: var(--k-grammar-bg); }
.ls .k-collocation { --k: var(--k-collocation); --kbg: var(--k-collocation-bg); }
.ls .k-phrase { --k: var(--k-phrase); --kbg: var(--k-phrase-bg); }
.ls b.k-grammar, .ls b.k-collocation, .ls b.k-phrase { color: var(--k); }
.ls-meta { color: #6b6b6b; font-size: .85rem; margin: 0; }

/* Player */
.ls-player { border: 2px solid #2b2b2b; border-radius: 14px 6px 14px 6px; box-shadow: 3px 3px 0 #2b2b2b; background: #111; overflow: hidden; }
.ls-frame { position: relative; }
.ls-frame video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.ls-caption { position: absolute; left: 50%; bottom: 3.2rem; transform: translateX(-50%); max-width: 92%; margin: 0; padding: .2rem .6rem;
              background: rgba(0, 0, 0, .72); color: #fff; font-size: 1.05rem; line-height: 1.35; text-align: center; border-radius: 6px; pointer-events: none; }
.ls-caption:empty { display: none; }
.ls-controls { display: flex; justify-content: center; gap: .4rem; padding: .45rem; background: #1d1d1d; }
.ls-controls button { border: 0; border-radius: 8px; background: #2f2f2f; color: #f1f1f1; padding: .3rem .65rem; font: inherit; font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.ls-controls button:hover { background: #3d3d3d; }
.ls-controls button.main { background: #ffd84d; color: #2b2b2b; font-size: 1.1rem; padding: .3rem 1rem; }
.ls-controls button.on { background: #0c8599; color: #fff; }
.ls-novideo { color: #ddd; padding: 2.2rem 1.2rem; display: flex; gap: .6rem; align-items: center; justify-content: center; text-align: center; font-size: .95rem; }
.ls-novideo .bi { font-size: 1.4rem; }

/* Pick panel */
.ls-pick { border: 2px solid #2b2b2b; border-radius: 14px 6px 14px 6px; box-shadow: 3px 3px 0 #2b2b2b; background: #fff; padding: 1rem 1.1rem; display: grid; gap: .7rem; }
.ls-pick.empty { background: #fffdf3; }
.ls-howto h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.ls-howto h3 .bi { color: #0d6efd; }
.ls-howto ol { margin: 0 0 .5rem; padding-left: 1.2rem; display: grid; gap: .2rem; }
.ls-pick-head { display: flex; justify-content: space-between; align-items: center; }
.ls-pick-label { font-weight: bold; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; color: #6b6b6b; }
.ls-x { border: 0; background: transparent; font-size: 1rem; cursor: pointer; color: #555; }
.ls-quote { margin: 0; padding: .6rem .8rem; border-left: 4px solid #ffd84d; background: #fafafa; border-radius: 0 8px 8px 0; font-size: 1.05rem; line-height: 1.5; }
.ls-quote mark { background: #ffe066; padding: .05rem .15rem; border-radius: 4px; font-weight: bold; }
.ls-tip { margin-top: -.3rem; }
.ls-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.ls-kind { border: 2px solid var(--k); border-radius: 10px; background: #fff; color: #2b2b2b; padding: .55rem .5rem; cursor: pointer; display: grid; justify-items: center; gap: .1rem; text-align: center; font: inherit; transition: background .15s, transform .1s; }
.ls-kind .bi { font-size: 1.3rem; color: var(--k); }
.ls-kind strong { font-size: .92rem; }
.ls-kind small { font-size: .74rem; color: #6b6b6b; line-height: 1.2; }
.ls-kind:hover:not(:disabled) { background: var(--kbg); transform: translateY(-1px); }
.ls-kind.on { background: var(--k); color: #fff; box-shadow: 2px 2px 0 #2b2b2b; }
.ls-kind.on .bi, .ls-kind.on small { color: #fff; }
.ls-kind:disabled { opacity: .35; cursor: default; }
.ls-form { display: grid; gap: .55rem; }
.ls-form label { display: grid; gap: .2rem; font-weight: bold; font-size: .88rem; }
.ls-form label small { font-weight: normal; color: #6b6b6b; }
.ls-form input, .ls-form textarea { border: 2px solid #2b2b2b; border-radius: 8px; padding: .4rem .55rem; font: inherit; font-weight: normal; width: 100%; }
.ls-form input:focus, .ls-form textarea:focus { outline: 3px solid #ffe066; outline-offset: 0; }
.ls-two { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ls-link { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .9rem; }
.ls-link .bi { color: var(--k-grammar); }
.ls-link .cl-picker { flex: 1; }
.ls-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ls-save { background: var(--k); color: #fff; }
.ls-delete { margin-left: auto; }
.ls-msg { margin: 0; }

/* Lines */
.ls-script { border: 2px solid #2b2b2b; border-radius: 14px 6px 14px 6px; box-shadow: 3px 3px 0 #2b2b2b; background: #fff; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 2rem); min-height: 420px; }
.ls-script-head { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .6rem .7rem; border-bottom: 2px solid #2b2b2b; background: #fffdf3; }
.ls-search { flex: 1; min-width: 160px; display: flex; align-items: center; gap: .4rem; border: 2px solid #2b2b2b; border-radius: 999px; padding: .2rem .7rem; background: #fff; }
.ls-search input { border: 0; outline: 0; width: 100%; font: inherit; background: transparent; }
.ls-follow { font-size: .85rem; white-space: nowrap; }
.ls-script .cs-empty { padding: 1rem; }
.sl-list { list-style: none; margin: 0; padding: .3rem 0; overflow-y: auto; flex: 1; position: relative; }
.sl-line { display: grid; grid-template-columns: auto 1fr auto; gap: .55rem; align-items: baseline; padding: .4rem .7rem; border-left: 4px solid transparent; }
.sl-line + .sl-line { border-top: 1px dashed #ececec; }
.sl-line.now { background: #fff8d6; border-left-color: #ffd84d; }
.sl-line.picked { background: #fffbe6; border-left-color: #2b2b2b; }
.sl-time { border: 0; background: #f1f1f1; border-radius: 6px; padding: .05rem .4rem; font-size: .75rem; font-variant-numeric: tabular-nums; color: #555; cursor: pointer; white-space: nowrap; }
.sl-time:hover:not(:disabled) { background: #ffd84d; color: #2b2b2b; }
.sl-time:disabled { cursor: default; }
.sl-text { margin: 0; line-height: 1.75; }
.sl-text .w { cursor: pointer; border-radius: 4px; padding: .05rem .08rem; margin-right: .22em; display: inline-block; line-height: 1.35; }
.sl-text .w:hover { background: #fff1a8; }
.sl-text .w.sel { background: #ffe066; font-weight: bold; margin-right: 0; padding-right: .3em; border-radius: 0; }
.sl-text .w.sel.first { border-radius: 4px 0 0 4px; }
.sl-text .w.sel.last { border-radius: 0 4px 4px 0; margin-right: .22em; padding-right: .08rem; }
.sl-text .w.sel.one { border-radius: 4px; margin-right: .22em; padding-right: .08rem; }
.sl-text .w.m { box-shadow: inset 0 -3px 0 var(--k); background: var(--kbg); }
.sl-tags { display: inline-flex; gap: .2rem; }
.sl-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--k); display: inline-block; }

/* In this lesson */
.ls-lesson h3 { font-size: 1.1rem; margin: 0 0 .6rem; }
.ls-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.ls-col { border: 2px solid var(--k); border-radius: 12px; background: #fff; padding: .7rem .8rem; }
.ls-col h4 { margin: 0 0 .5rem; font-size: .98rem; color: var(--k); display: flex; align-items: center; gap: .35rem; }
.ls-col h4 span { margin-left: auto; background: var(--kbg); color: var(--k); border-radius: 999px; padding: 0 .5rem; font-size: .8rem; }
.ls-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; max-height: 320px; overflow-y: auto; }
.ls-item { width: 100%; text-align: left; border: 0; border-radius: 8px; background: var(--kbg); padding: .4rem .55rem; cursor: pointer; font: inherit; display: grid; gap: .1rem; }
.ls-item:hover { outline: 2px solid var(--k); }
.ls-item small { color: #555; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media (max-width: 900px) {
    .ls-main { grid-template-columns: 1fr; }
    .ls-stage { position: static; }
    .ls-script { max-height: 70vh; }
    .ls-columns { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .ls-kinds { grid-template-columns: 1fr; }
    .ls-kind { grid-template-columns: auto 1fr; justify-items: start; text-align: left; column-gap: .5rem; }
    .ls-kind .bi { grid-row: span 2; }
    .ls-two { grid-template-columns: 1fr; }
}

/* Phrases and grammar tabs: what kind each item is */
.cs-kind { display: inline-block; margin-right: .3rem; padding: 0 .4rem; border-radius: 999px; font-size: .72rem; font-weight: bold; vertical-align: middle; }
.cs-kind.k-collocation { background: #e3f6f8; color: #0c8599; }
.cs-kind.k-grammar { background: #f1ecff; color: #7048e8; }
.cs-notes { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.cs-notes li { border: 2px solid #7048e8; border-radius: 10px; padding: .6rem .8rem; display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; }
.cs-notes strong { color: #7048e8; }
.cs-notes p { margin: .15rem 0 0; }
.cs-notes em { display: block; color: #555; font-size: .9rem; margin-top: .2rem; }
.cs-notes mark { background: #ffe066; }
.cs-subhead { font-size: 1rem; margin: 1rem 0 .5rem; }
.cs-tabs button.studio-tab { background: #ffd84d; }
.cs-tabs button.studio-tab.on { box-shadow: 2px 2px 0 #2b2b2b; }
.cl-page.cl-studio { max-width: 1280px; }

/* ---------- A student's class space (Pages/classes/ClassSpacePage.razor) ---------- */
.cs-space { max-width: 760px; margin: 0 auto; display: grid; gap: 1rem; }
.cs-head h1 { margin: 0; font-size: 1.8rem; }
.cs-head p { margin: .2rem 0 0; color: #555; }
.cs-pill { display: inline-block; margin-left: .3rem; padding: 0 .5rem; border-radius: 999px; background: #eee; font-size: .85rem; vertical-align: middle; }
.cs-empty-card { text-align: center; padding: 1.6rem 1.2rem; }
.cs-empty-card > .bi { font-size: 2rem; color: #0d6efd; }
.cs-empty-card p { margin: .4rem 0 0; }
.cs-films { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.cs-films a { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fffdf3; color: #2b2b2b; text-decoration: none; }
.cs-films a:hover { background: #fff1a8; }
.cs-films .bi { font-size: 1.4rem; color: #0d6efd; }
.cs-films span { display: grid; min-width: 0; }
.cs-films strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-films small { color: #6b6b6b; }
.cs-space .cl-next { border-width: 3px; }
.cs-space .cl-next h2 { font-size: 1.4rem; }
.cl-joined-sum { margin: .2rem 0 .7rem; }
.class-space .site-announcement { display: none; }

/* Teacher: students waiting to join (name + PIN, approval on). */
.cl-pending { border-color: #b26b00; }
.cl-pending-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cl-pending-list li { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .45rem .6rem; border: 1px dashed #d7d7d7; border-radius: 8px; }
.cl-pending-list small { color: #6b6b6b; margin-left: .4rem; }
.cl-pending-actions { display: flex; align-items: center; gap: .8rem; }
.cl-btn.small { padding: .2rem .6rem; font-size: .85rem; }

/* Join with a name and PIN (Pages/classes/JoinClass.razor). */
.jn-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin: .6rem 0 .8rem; }
.jn-tabs button { border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; background: #fff; padding: .5rem .6rem; font: inherit; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.jn-tabs button.on { background: #ffd84d; box-shadow: 2px 2px 0 #2b2b2b; }
.jn-form { display: grid; gap: .7rem; }
.jn-form label { display: grid; gap: .25rem; font-weight: bold; }
.jn-form input { border: 2px solid #2b2b2b; border-radius: 8px; padding: .5rem .65rem; font: inherit; font-weight: normal; font-size: 1.05rem; width: 100%; }
.jn-form input:focus { outline: 3px solid #ffe066; outline-offset: 0; }
.jn-pin { display: flex; align-items: center; gap: .6rem; }
.jn-pin input { max-width: 9rem; letter-spacing: .5em; text-align: center; font-size: 1.3rem; }
.jn-hint { margin: 0; font-size: .9rem; color: #555; }
.jn-account { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px dashed #d7d7d7; font-size: .9rem; color: #555; }
.cs-waiting h1 { font-size: 1.4rem; margin: .4rem 0; }

.cl-watch-full { display: inline-flex; margin: 0 0 .8rem; font-weight: bold; }

/* The teacher's grammar notes in a student's homework checklist: something to read, not a step to tick. */
.hw-checklist li.note::before { content: none; }
.hw-checklist li.note { padding-left: 0; }
.hw-checklist li.note a { color: #7048e8; font-weight: bold; text-decoration: none; }
.hw-checklist li.note a:hover { text-decoration: underline; }

/* ---------- Teacher's class page: tabs, overview, homework form, question results (TeachClass.razor) ---------- */
.tc-head .tc-title { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.tc-head h1 { margin: 0; }
.tc-code { display: inline-flex; align-items: center; gap: .35rem; border: 2px dashed #2b2b2b; border-radius: 10px; background: #fffdf3; padding: .1rem .65rem; font: inherit; font-weight: bold; letter-spacing: .12em; cursor: pointer; }
.tc-code:hover { background: #fff1a8; }

.tc-tabs { display: flex; gap: .35rem; overflow-x: auto; padding: .15rem .15rem 0; margin-bottom: .2rem; border-bottom: 3px solid #2b2b2b; scrollbar-width: none; }
.tc-tabs::-webkit-scrollbar { display: none; }
.tc-tab { flex: none; display: inline-flex; align-items: center; gap: .4rem; border: 2px solid #2b2b2b; border-bottom: none; border-radius: 12px 12px 0 0; background: #fff; padding: .5rem .9rem; margin-bottom: -3px; font: inherit; font-weight: bold; color: #2b2b2b; cursor: pointer; white-space: nowrap; }
.tc-tab:hover { background: #fff6c7; }
.tc-tab.on { background: #ffd84d; padding-bottom: calc(.5rem + 3px); }
.tc-tab .bi { font-size: 1.05rem; }
.tc-badge { min-width: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: #2b2b2b; color: #fff; font-size: .75rem; text-align: center; }
.tc-badge.late { background: #dc3545; }
.tc-badge.wait { background: #b26b00; }

/* Overview */
.tc-start { border-color: #0d6efd; background: #f4f8ff; }
.tc-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.tc-steps li { display: grid; grid-template-columns: auto 1fr auto; gap: .8rem; align-items: center; padding: .55rem .7rem; border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fff; }
.tc-steps li.done { background: #eaf6ef; border-color: #146c43; }
.tc-steps li.done .tc-step-no { background: #146c43; color: #fff; border-color: #146c43; }
.tc-steps small { display: block; color: #6b6b6b; }
.tc-step-no { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 2px solid #2b2b2b; border-radius: 50%; background: #ffd84d; font-weight: bold; flex: none; }

.tc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.tc-tile { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon num" "icon label"; column-gap: .7rem; align-items: center; text-align: left; border: 2px solid #2b2b2b; border-radius: 14px 6px 14px 6px; background: #fff; box-shadow: 3px 3px 0 #2b2b2b; padding: .7rem .9rem; font: inherit; color: #2b2b2b; }
button.tc-tile { cursor: pointer; }
button.tc-tile:hover { transform: translateY(-1px); }
.tc-tile .bi { grid-area: icon; font-size: 1.7rem; color: #0d6efd; }
.tc-tile strong { grid-area: num; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tc-tile span { grid-area: label; color: #6b6b6b; font-size: .85rem; }
.tc-tile.ok { background: #eaf6ef; } .tc-tile.ok .bi { color: #146c43; }
.tc-tile.warn { background: #fff7e0; } .tc-tile.warn .bi { color: #b26b00; }
.tc-tile.bad { background: #fbecee; } .tc-tile.bad .bi { color: #b02a37; }

.tc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.tc-allgood { display: flex; align-items: center; gap: .5rem; margin: 0; color: #146c43; font-weight: bold; }
.tc-allgood .bi { font-size: 1.5rem; }

.tc-attn { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.tc-attn li { display: flex; align-items: center; gap: .7rem; }
.tc-avatar { flex: none; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 2px solid #2b2b2b; border-radius: 50%; font-weight: bold; font-size: .85rem; }
.tc-avatar.c0 { background: #ffd8d8; } .tc-avatar.c1 { background: #d8f0e2; } .tc-avatar.c2 { background: #dbe8ff; }
.tc-avatar.c3 { background: #fff0c2; } .tc-avatar.c4 { background: #ead9ff; } .tc-avatar.c5 { background: #d3f3f6; }
.tc-reasons { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.tc-reason { padding: 0 .5rem; border-radius: 999px; font-size: .78rem; font-weight: bold; background: #eee; color: #555; }
.tc-reason.r-late { background: #fbe0e3; color: #a52834; }
.tc-reason.r-practice { background: #fff0c2; color: #7a5200; }
.tc-reason.r-idle { background: #e9ecef; color: #495057; }

.tc-hw { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.tc-hw li { display: grid; gap: .3rem; padding-bottom: .7rem; border-bottom: 1px dashed #d7d7d7; }
.tc-hw li:last-child { border-bottom: none; padding-bottom: 0; }
.tc-hw-main { display: grid; text-align: left; border: 0; background: transparent; padding: 0; font: inherit; color: #2b2b2b; cursor: pointer; }
.tc-hw-main:hover strong { text-decoration: underline; }
.tc-hw-main small, .hw-main small.over { color: #6b6b6b; }
.tc-hw-main small.over, .hw-main small.over { color: #b02a37; font-weight: bold; }

.tc-progress { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tc-bar { display: inline-flex; width: 7.5rem; height: .75rem; border: 2px solid #2b2b2b; border-radius: 999px; overflow: hidden; background: #eee; }
.tc-bar i { display: block; height: 100%; }
.tc-bar .ok { background: #198754; }
.tc-bar .warn { background: #f0ad00; }
.tc-count { font-weight: bold; font-variant-numeric: tabular-nums; font-size: .9rem; }

.tc-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .7rem; }
.tc-action-grid button { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon title" "icon text"; column-gap: .7rem; text-align: left; align-items: center; border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fffdf3; padding: .7rem .8rem; font: inherit; color: #2b2b2b; cursor: pointer; }
.tc-action-grid button:hover { background: #fff1a8; }
.tc-action-grid .bi { grid-area: icon; font-size: 1.7rem; color: #0d6efd; }
.tc-action-grid strong { grid-area: title; }
.tc-action-grid small { grid-area: text; color: #6b6b6b; }

/* Homework form: three steps */
.tc-form { display: grid; gap: .9rem; margin: .4rem 0 1.1rem; padding: 1rem; border: 2px dashed #2b2b2b; border-radius: 14px 6px 14px 6px; background: #fffdf3; }
.tc-step { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start; }
.tc-step-body { display: grid; gap: .45rem; min-width: 0; }
.tc-step-body > label, .tc-label { font-weight: bold; }
.tc-step-body input:not([type="checkbox"]) { border: 2px solid #2b2b2b; border-radius: 8px; padding: .4rem .6rem; font: inherit; width: 100%; background: #fff; }
.tc-step-body input:focus { outline: 3px solid #ffe066; outline-offset: 0; }
.tc-row { grid-template-columns: auto 1fr; align-items: end; gap: .8rem; }
.tc-row label { display: grid; gap: .25rem; font-weight: bold; }
.tc-row label small { font-weight: normal; color: #6b6b6b; }
.tc-picked { margin: 0; color: #146c43; font-weight: bold; }
.tc-checks { display: flex; flex-wrap: wrap; gap: .5rem; }
.tc-check { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .8rem; border: 2px solid #2b2b2b; border-radius: 999px; background: #fff; cursor: pointer; font-weight: bold; user-select: none; }
.tc-check input { accent-color: #2b2b2b; }
.tc-check .bi { color: #6b6b6b; }
.tc-check.on { background: #ffd84d; box-shadow: 2px 2px 0 #2b2b2b; }
.tc-check.on .bi { color: #2b2b2b; }
.cl-score { display: inline-flex; align-items: center; gap: .4rem; font-weight: normal; }
.cl-score input { width: 5rem !important; }

/* Homework results: students, and the quiz question by question */
.cl-homework.teacher > li.open { background: #fafcff; }
.tc-results { grid-column: 1 / -1; margin-top: .5rem; }
.tc-subtabs { display: flex; gap: .4rem; margin-bottom: .6rem; }
.tc-subtabs button { display: inline-flex; align-items: center; gap: .35rem; border: 2px solid #2b2b2b; border-radius: 999px; background: #fff; padding: .25rem .8rem; font: inherit; font-weight: bold; cursor: pointer; }
.tc-subtabs button.on { background: #2b2b2b; color: #fff; }

.qs-summary { display: grid; grid-template-columns: auto 1fr; gap: 0 .6rem; align-items: center; margin: 0 0 .8rem; padding: .6rem .8rem; border: 2px solid; border-radius: 10px; font-weight: bold; }
.qs-summary .bi { grid-row: span 2; font-size: 1.5rem; }
.qs-summary small { grid-column: 2; font-weight: normal; color: #555; }
.qs-summary.alert { border-color: #b26b00; background: #fff7e0; color: #7a5200; }
.qs-summary.fine { border-color: #146c43; background: #eaf6ef; color: #146c43; }
.qs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.qs { --q: #146c43; --qbg: #eaf6ef; display: grid; gap: .55rem; padding: .8rem .9rem; border: 2px solid #2b2b2b; border-left: 8px solid var(--q); border-radius: 12px 4px 12px 4px; background: #fff; }
.qs.mid { --q: #b26b00; --qbg: #fff7e0; }
.qs.hard { --q: #b02a37; --qbg: #fbecee; }
.qs-head { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: start; }
.qs-no { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--q); color: #fff; font-weight: bold; font-size: .85rem; }
.qs-text { margin: 0; font-weight: bold; line-height: 1.4; }
.qs-badge { padding: .1rem .6rem; border-radius: 999px; background: var(--qbg); color: var(--q); font-weight: bold; font-size: .82rem; white-space: nowrap; }
.qs-meter { display: flex; height: .55rem; border-radius: 999px; overflow: hidden; background: #eee; }
.qs-meter .ok { background: #198754; }
.qs-meter .bad { background: var(--q); }
.qs-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.qs-options li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) 6rem 1.6rem 1.2rem; gap: .5rem; align-items: center; padding: .25rem .5rem; border-radius: 8px; }
.qs-options li.right { background: #eaf6ef; }
.qs-options li.top-wrong { background: #fbecee; }
.qs-options b { color: #6b6b6b; }
.qs-opt { overflow-wrap: anywhere; }
.qs-bar { display: block; height: .5rem; border-radius: 999px; background: #eee; overflow: hidden; }
.qs-bar i { display: block; height: 100%; background: #adb5bd; }
.qs-options li.right .qs-bar i { background: #198754; }
.qs-options li.top-wrong .qs-bar i { background: #dc3545; }
.qs-n { text-align: right; font-weight: bold; font-variant-numeric: tabular-nums; }
.qs-mark { color: #146c43; }
.qs-skipped, .qs-explain { margin: 0; color: #555; font-size: .9rem; }
.qs-explain .bi { color: #b26b00; }
.qs-who summary { cursor: pointer; font-weight: bold; color: #555; }
.qs-who p { margin: .3rem 0 0; color: #333; }

@media (max-width: 760px) {
    .tc-grid { grid-template-columns: 1fr; }
    .tc-row { grid-template-columns: 1fr; }
    .qs-options li { grid-template-columns: 1.4rem minmax(0, 1fr) 1.6rem 1.2rem; }
    .qs-options .qs-bar { display: none; }
    .qs-head { grid-template-columns: auto 1fr; }
    .qs-badge { grid-column: 2; justify-self: start; }
    .tc-steps li { grid-template-columns: auto 1fr; }
    .tc-steps li .cl-btn { grid-column: 2; justify-self: start; }
    .tc-bar { width: 5.5rem; }
}

/* Lesson studio: "Suggest with AI" */
.ls-ai { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .5rem .7rem; border: 2px dashed #7048e8; border-radius: 10px; background: #f6f2ff; }
.ls-ai small { color: #555; flex: 1; min-width: 12rem; }
.ls-ai-btn { display: inline-flex; align-items: center; gap: .4rem; border: 2px solid #2b2b2b; border-radius: 999px; background: linear-gradient(135deg, #b197fc, #7048e8); color: #fff; padding: .3rem .9rem; font: inherit; font-weight: bold; cursor: pointer; box-shadow: 2px 2px 0 #2b2b2b; }
.ls-ai-btn:hover:not(:disabled) { filter: brightness(1.08); }
.ls-ai-btn:disabled { opacity: .7; cursor: progress; box-shadow: none; }

/* ---------- Homework guide (Pages/classes/HomeworkGuide.razor) and the step bar (HomeworkTrail.razor) ---------- */
.hg { max-width: 760px; margin: 0 auto; display: grid; gap: 1rem; }

.hg-hero { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1.1rem 1.3rem; border: 2px solid #2b2b2b; border-radius: 16px 6px 18px 8px; background: linear-gradient(135deg, #fff8d6, #fffdf3); box-shadow: 3px 3px 0 #2b2b2b; }
.hg-hero.finished { background: linear-gradient(135deg, #d8f0e2, #f4fbf7); }
.hg-hero-text { min-width: 0; display: grid; gap: .35rem; }
.hg-kicker { margin: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; font-size: .85rem; font-weight: bold; color: #555; text-transform: uppercase; letter-spacing: .04em; }
.hg-due { padding: 0 .55rem; border-radius: 999px; background: #fff; border: 1.5px solid #2b2b2b; text-transform: none; letter-spacing: 0; }
.hg-due.bad { background: #fbe0e3; color: #a52834; border-color: #a52834; }
.hg h1 { margin: 0; font-size: 1.55rem; line-height: 1.25; overflow-wrap: anywhere; }
.hg-note { margin: .1rem 0 0; display: flex; gap: .5rem; align-items: baseline; padding: .5rem .8rem; border-left: 4px solid #0d6efd; border-radius: 0 10px 10px 0; background: #f0f6ff; font-style: italic; }
.hg-note .bi { color: #0d6efd; flex: none; }

.hg-ring { --p: 0; flex: none; display: grid; place-items: center; width: 5.2rem; height: 5.2rem; border-radius: 50%; background: conic-gradient(#198754 calc(var(--p) * 1%), #dee2e6 0); position: relative; }
.hg-ring::before { content: ""; position: absolute; inset: .5rem; border-radius: 50%; background: #fffdf3; border: 2px solid #2b2b2b; }
.hg-ring span { position: relative; text-align: center; line-height: 1.05; font-weight: bold; }
.hg-ring strong { font-size: 1.5rem; }
.hg-ring small { display: block; font-weight: normal; font-size: .72rem; color: #6b6b6b; }

.hg-done { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem; border: 2px solid #146c43; border-radius: 14px 6px 14px 6px; background: #eaf6ef; }
.hg-done > .bi { font-size: 2.2rem; color: #d99a00; }
.hg-done div { flex: 1; min-width: 12rem; }
.hg-done h2 { margin: 0; font-size: 1.15rem; color: #146c43; }
.hg-done p { margin: .1rem 0 0; color: #333; }

/* The path: a line down the left, a node for each step */
.hg-path { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; position: relative; }
.hg-step { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem; align-items: start; position: relative; }
.hg-step:not(:last-child)::before { content: ""; position: absolute; left: calc(1.2rem - 1.5px); top: 2.4rem; bottom: -.9rem; width: 3px; background: repeating-linear-gradient(to bottom, #adb5bd 0 6px, transparent 6px 11px); }
.hg-step.done:not(:last-child)::before { background: #198754; }
.hg-node { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 2px solid #2b2b2b; border-radius: 50%; background: #fff; font-weight: bold; position: relative; z-index: 1; }
.hg-step.current .hg-node { background: #ffd84d; box-shadow: 0 0 0 4px rgba(255, 216, 77, .45); }
.hg-step.done .hg-node { background: #198754; color: #fff; border-color: #146c43; }

.hg-card { border: 2px solid #2b2b2b; border-radius: 14px 5px 14px 5px; background: #fff; padding: .8rem 1rem; display: grid; gap: .6rem; min-width: 0; }
.hg-step.todo .hg-card { background: #fafafa; border-color: #adb5bd; }
.hg-step.current .hg-card { border-width: 3px; box-shadow: 3px 3px 0 #2b2b2b; background: #fffdf3; }
.hg-step.done .hg-card { border-color: #146c43; background: #f6fbf8; }
.hg-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: center; }
.hg-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: #eef3ff; color: #0d6efd; font-size: 1.35rem; }
.hg-step.current .hg-icon { background: #ffd84d; color: #2b2b2b; }
.hg-step.done .hg-icon { background: #d8f0e2; color: #146c43; }
.hg-info h2 { margin: 0; font-size: 1.05rem; }
.hg-info p { margin: .1rem 0 0; color: #6b6b6b; font-size: .9rem; }
.hg-act { display: flex; align-items: center; gap: .7rem; white-space: nowrap; }
.hg-ok { display: inline-flex; align-items: center; gap: .3rem; font-weight: bold; color: #146c43; }
.hg-open { border: 2px solid #2b2b2b; border-radius: 999px; background: #fff; padding: .15rem .8rem; font: inherit; font-weight: bold; font-size: .9rem; color: #2b2b2b; text-decoration: none; cursor: pointer; }
.hg-open:hover { background: #fff1a8; }
.hg-practice { margin: 0; padding: .45rem .7rem; border-radius: 8px; background: #fff7e0; color: #7a5200; font-size: .92rem; }
.hg-notes { display: grid; gap: .8rem; padding-top: .3rem; border-top: 1px dashed #d7d7d7; }
.hg-notes-end { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.hg-extra { display: flex; align-items: center; gap: .9rem; padding: .7rem 1rem; border: 2px dashed #2b2b2b; border-radius: 12px; background: #fffdf3; }
.hg-extra > .bi { font-size: 1.6rem; color: #0d6efd; }
.hg-extra div { flex: 1; }
.hg-extra p { margin: 0; color: #6b6b6b; font-size: .9rem; }

@media (max-width: 560px) {
    .hg-hero { flex-direction: column-reverse; align-items: flex-start; }
    .hg-ring { width: 4.4rem; height: 4.4rem; }
    .hg-step { grid-template-columns: 2rem minmax(0, 1fr); gap: .5rem; }
    .hg-node { width: 2rem; height: 2rem; font-size: .9rem; }
    .hg-step:not(:last-child)::before { left: calc(1rem - 1.5px); top: 2rem; }
    .hg-row { grid-template-columns: auto minmax(0, 1fr); }
    .hg-act { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}

/* Step bar above the Listen, Phrases and Quiz pages */
.ht { max-width: 1000px; margin: 0 auto .9rem; display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; padding: .5rem .8rem; border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fffdf3; box-shadow: 2px 2px 0 #2b2b2b; }
.ht-back { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; max-width: 18rem; color: #2b2b2b; font-weight: bold; text-decoration: none; }
.ht-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ht-back .bi { color: #0d6efd; font-size: 1.15rem; flex: none; }
.ht-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }
.ht-steps li a { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem .15rem .2rem; border-radius: 999px; color: #555; text-decoration: none; font-size: .9rem; }
.ht-steps li a:hover { background: #fff1a8; }
.ht-dot { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 2px solid #adb5bd; border-radius: 50%; font-size: .75rem; font-weight: bold; background: #fff; }
.ht-steps li.now a { background: #ffd84d; color: #2b2b2b; font-weight: bold; }
.ht-steps li.now .ht-dot { border-color: #2b2b2b; }
.ht-steps li.done .ht-dot { background: #198754; color: #fff; border-color: #146c43; }
.ht-next { margin-left: auto; }
.ht-finish { background: #198754; border-color: #146c43; color: #fff; }

@media (max-width: 640px) {
    .ht-name { display: none; }
    .ht-steps li.now .ht-name { display: inline; }
    .ht-back span { display: none; }
}

/* ---------- Practise your teacher's picks (Pages/classes/PracticePage.razor) ---------- */
.pr { --k-grammar: #7048e8; --k-grammar-bg: #f1ecff; --k-collocation: #0c8599; --k-collocation-bg: #e3f6f8;
      max-width: 700px; margin: 0 auto; display: grid; gap: 1rem; }
.pr .k-grammar { --k: var(--k-grammar); --kbg: var(--k-grammar-bg); }
.pr .k-collocation { --k: var(--k-collocation); --kbg: var(--k-collocation-bg); }

.pr-hero { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border: 2px solid #2b2b2b; border-radius: 16px 6px 18px 8px; background: linear-gradient(135deg, #f1ecff, #fffdf3); box-shadow: 3px 3px 0 #2b2b2b; }
.pr-hero h1 { margin: 0; font-size: 1.5rem; }
.pr-hero p { margin: .2rem 0 0; color: #555; }
.pr-bolt { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 2px solid #2b2b2b; border-radius: 14px 5px 14px 5px; background: #ffd84d; box-shadow: 2px 2px 0 #2b2b2b; font-size: 1.7rem; }
.pr-picks { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.pr-picks li { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem .25rem .3rem; border: 2px solid var(--k); border-radius: 999px; background: var(--kbg); }
.cl-btn.big { padding: .55rem 1.6rem; font-size: 1.1rem; }

.pr-kind { padding: 0 .55rem; border-radius: 999px; background: var(--k); color: #fff; font-size: .72rem; font-weight: bold; text-transform: uppercase; letter-spacing: .04em; }

/* Progress: one segment per question */
.pr-top { display: flex; align-items: center; gap: .8rem; }
.pr-progress { flex: 1; display: flex; gap: .25rem; }
.pr-progress i { flex: 1; height: .6rem; border-radius: 999px; background: #dee2e6; border: 1.5px solid #adb5bd; }
.pr-progress i.ok { background: #198754; border-color: #146c43; }
.pr-progress i.bad { background: #f0ad00; border-color: #b26b00; }
.pr-progress i.now { background: #ffd84d; border-color: #2b2b2b; }
.pr-count { font-weight: bold; font-variant-numeric: tabular-nums; color: #555; }

.pr-card { display: grid; gap: .9rem; padding: 1.1rem 1.2rem; border: 2px solid #2b2b2b; border-left: 8px solid var(--k); border-radius: 16px 6px 18px 8px; background: #fff; box-shadow: 3px 3px 0 #2b2b2b; }
.pr-meta { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pr-hear { display: inline-flex; align-items: center; gap: .35rem; border: 2px solid #2b2b2b; border-radius: 999px; background: #fff; padding: .1rem .75rem; font: inherit; font-size: .85rem; font-weight: bold; cursor: pointer; }
.pr-hear:hover { background: #fff1a8; }
.pr-task { margin: 0; color: #555; }
.pr-from { margin: -.4rem 0 0; padding: .45rem .7rem; border-left: 4px solid #ffd84d; background: #fffdf3; border-radius: 0 8px 8px 0; font-size: 1.02rem; }

/* The line with its gap */
.pr-line { margin: 0; font-size: 1.35rem; line-height: 2.5; }
.pr-slots { display: inline-flex; flex-wrap: wrap; gap: .3rem; vertical-align: middle; margin: 0 .15rem; }
.pr-slot { display: inline-flex; align-items: center; justify-content: center; min-width: 3.2rem; height: 2.3rem; padding: 0 .65rem; border-radius: 10px; font: inherit; font-size: 1.15rem; line-height: 1; }
.pr-slot.empty { border: 2.5px dashed #868e96; background: #f8f9fa; }
.pr-slot.filled { border: 2px solid #2b2b2b; background: #ffe066; font-weight: bold; box-shadow: 2px 2px 0 #2b2b2b; cursor: pointer; }
.pr-slot.right { background: #d8f0e2; border-color: #146c43; color: #146c43; box-shadow: none; cursor: default; }
.pr-slot.reveal { background: #fff0c2; border-color: #b26b00; color: #7a5200; box-shadow: none; cursor: default; }

.pr-bank { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; padding: .9rem; border: 2px dashed #ced4da; border-radius: 14px; background: #fafafa; }
.pr-tile { border: 2px solid #2b2b2b; border-radius: 10px; background: #fff; padding: .4rem .95rem; font: inherit; font-size: 1.1rem; font-weight: bold; box-shadow: 2px 2px 0 #2b2b2b; cursor: pointer; transition: transform .08s; }
.pr-tile:hover:not(:disabled) { background: #fff1a8; transform: translateY(-2px); }
.pr-tile:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.pr-tile:disabled { opacity: .25; box-shadow: none; cursor: default; }
.pr-tools { display: flex; gap: 1rem; align-items: center; }
.pr-hint { margin: 0; padding: .55rem .8rem; border-radius: 10px; background: #fff7e0; color: #7a5200; }
.pr-hint .bi { color: #d99a00; }
.pr-try { margin: 0; padding: .45rem .8rem; border-radius: 10px; background: #fbecee; color: #a52834; font-weight: bold; animation: pr-shake .35s; }
@keyframes pr-shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }

/* Meaning choices */
.pr-choices { display: grid; gap: .55rem; }
.pr-choice { display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: center; text-align: left; border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fff; padding: .6rem .8rem; font: inherit; cursor: pointer; }
.pr-choice b { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #f1f3f5; border: 2px solid #2b2b2b; }
.pr-choice:hover:not(:disabled) { background: #fff1a8; }
.pr-choice.right { background: #d8f0e2; border-color: #146c43; }
.pr-choice.right b { background: #146c43; color: #fff; border-color: #146c43; }
.pr-choice.wrong { background: #fbecee; border-color: #b02a37; }
.pr-choice.wrong b { background: #b02a37; color: #fff; border-color: #b02a37; }
.pr-choice.dim { opacity: .55; }
.pr-choice:disabled { cursor: default; }

/* After answering */
.pr-feedback { display: grid; gap: .7rem; padding: .9rem 1rem; border-radius: 12px; border: 2px solid; }
.pr-feedback.good { border-color: #146c43; background: #f2faf5; }
.pr-feedback.bad { border-color: #b26b00; background: #fffaf0; }
.pr-verdict { margin: 0; display: flex; align-items: center; gap: .5rem; font-weight: bold; font-size: 1.1rem; }
.pr-feedback.good .pr-verdict { color: #146c43; }
.pr-feedback.bad .pr-verdict { color: #a35c00; }
.pr-note { padding: .6rem .8rem; border-left: 4px solid var(--k); border-radius: 0 10px 10px 0; background: var(--kbg); }
.pr-note p { margin: .25rem 0 0; line-height: 1.5; }
.pr-fa { color: #444; }
.pr-form { display: inline-block; margin-left: .4rem; padding: 0 .45rem; border-radius: 6px; background: #fff; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .88rem; color: var(--k); }
.pr-actions { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.pr-scene { margin-top: .2rem; }

/* The end */
.pr-sub { margin: 0; color: #333; }
.pr-cards { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: .9rem 1.1rem; border: 2px solid #0c8599; border-radius: 14px 6px 14px 6px; background: #e3f6f8; }
.pr-cards > .bi { font-size: 2rem; color: #0c8599; }
.pr-cards h2 { margin: 0; font-size: 1.1rem; }
.pr-cards p { margin: .15rem 0 0; color: #333; }
.pr-bad { color: #a52834 !important; font-weight: bold; }
.pr-missed { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.pr-missed li { display: grid; gap: .25rem; padding: .7rem .9rem; border-left: 5px solid var(--k); border-radius: 0 10px 10px 0; background: var(--kbg); }
.pr-missed p { margin: 0; line-height: 1.5; }
.pr-missed blockquote { margin: 0; color: #555; font-style: italic; }
.pr-end { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.ls-practice-note { margin: 0 0 .7rem; }
.ls-practice-note .bi { color: #d99a00; }
.hg-tag { margin-left: .5rem; padding: 0 .5rem; border-radius: 999px; background: #eef3ff; color: #364fc7; font-size: .72rem; font-weight: bold; vertical-align: middle; }

@media (max-width: 560px) {
    .pr-line { font-size: 1.15rem; line-height: 2.4; }
    .pr-cards { grid-template-columns: auto 1fr; }
    .pr-cards .cl-btn { grid-column: 1 / -1; justify-self: start; }
    .pr-hero { flex-direction: column; align-items: flex-start; }
}

/* ---------- Listening segments: the teacher's picker (SegmentPanel) and the student's cards (SegmentListener) ---------- */
.ls-modes { display: flex; gap: .4rem; margin-bottom: .6rem; }
.ls-modes button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .45rem .6rem; border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; background: #fff; font: inherit; font-weight: bold; cursor: pointer; }
.ls-modes button:hover { background: #fff1a8; }
.ls-modes button.on { background: #364fc7; border-color: #2b2b2b; color: #fff; box-shadow: 2px 2px 0 #2b2b2b; }
.ls-count { min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: #fff; color: #2b2b2b; font-size: .8rem; text-align: center; }

.sl-line.seg { background: #e8f0ff; border-left-color: #364fc7; }
.sl-line.seg + .sl-line.seg { border-top-color: #cdd9f7; }

.sg { --k: #364fc7; --kbg: #eef3ff; background: #f6f8ff; }
.sg .ls-save { background: #364fc7; color: #fff; }
.sg .ls-save .bi { color: #fff; }
.sg-head h3 { margin: 0; font-size: 1.05rem; }
.sg-head h3 .bi { color: #364fc7; }
.sg-mode { margin: 0; padding: 0; border: 0; display: grid; gap: .4rem; }
.sg-mode legend { padding: 0; margin-bottom: .2rem; font-size: .85rem; font-weight: bold; color: #444; }
.sg-opt { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: .55rem; padding: .45rem .7rem; border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; background: #fff; cursor: pointer; }
.sg-opt:hover { background: #fff1a8; }
.sg-opt.on { background: #dbe4ff; box-shadow: 2px 2px 0 #2b2b2b; }
.sg-opt input { width: 18px; height: 18px; }
.sg-opt .bi { font-size: 1.2rem; color: #364fc7; }
.sg-opt span { display: grid; }
.sg-opt small { color: #555; font-size: .8rem; }
.sg-range { display: grid; gap: .5rem; }
.sg-range-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sg-label { font-weight: bold; }
.sg-time { flex: 1; color: #364fc7; font-weight: bold; font-size: .9rem; }
.sg-gap { display: block; color: #6b6b6b; font-size: .85rem; }
.sg-preview { display: flex; align-items: center; gap: .6rem; }
.sg-list h4 { margin: 0 0 .4rem; font-size: .95rem; }
.sg-list h4 span { margin-left: .3rem; padding: 0 .45rem; border-radius: 999px; background: #dbe4ff; font-size: .8rem; }
.sg-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.sg-list .ls-item { --k: #364fc7; --kbg: #eef3ff; }
.sg-list .ls-item.on { outline: 2px solid #364fc7; }

.sgl { margin: 0 0 1rem; padding: 1rem 1.1rem; border: 2px solid #2b2b2b; border-radius: 16px 6px 18px 8px; background: linear-gradient(135deg, #eef3ff, #fffdf3); box-shadow: 3px 3px 0 #2b2b2b; display: grid; gap: .8rem; }
.sgl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.sgl-head h2 { margin: 0; font-size: 1.2rem; }
.sgl-head h2 .bi { color: #364fc7; }
.sgl-head p { margin: .15rem 0 0; color: #444; }
.sgl-controls { display: grid; gap: .8rem; }
.sgl-tools { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-end; }
.sgl-progress { margin: 0; color: #444; }
.sgl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.sgl-card { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: .8rem .9rem; border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fff; }
.sgl-card.playing { background: #fff8d6; box-shadow: 2px 2px 0 #2b2b2b; }
.sgl-card.heard { border-color: #146c43; }
.sgl-num { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 2px solid #2b2b2b; border-radius: 50%; background: #dbe4ff; font-weight: bold; }
.sgl-card.heard .sgl-num { background: #146c43; border-color: #146c43; color: #fff; }
.sgl-body { display: grid; gap: .4rem; min-width: 0; }
.sgl-body h3 { margin: 0; font-size: 1.05rem; }
.sgl-task { margin: 0; display: flex; gap: .45rem; align-items: baseline; padding: .4rem .65rem; border-left: 4px solid #ffd84d; background: #fffdf3; border-radius: 0 8px 8px 0; }
.sgl-task .bi, .sgl-answer .bi { color: #d99a00; }
.sgl-actions { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.sgl-length { color: #6b6b6b; font-size: .88rem; }
.sgl-na { color: #6b6b6b; font-size: .9rem; }
.sgl-answer { margin: 0; padding: .5rem .75rem; border-left: 4px solid #146c43; background: #f2faf5; border-radius: 0 8px 8px 0; }
.sgl-answer .bi { color: #146c43; }
.sgl-notice { margin: 0; color: #a52834; font-weight: bold; }
.sgl-head p .bi { color: #146c43; }
.sgl-typing { display: grid; gap: .8rem; padding: .9rem 1rem; border: 2px solid #2b2b2b; border-radius: 12px 4px 12px 4px; background: #fffdf3; }
.sgl-paused { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin: 0 0 1rem; padding: .6rem .9rem; border: 2px dashed #364fc7; border-radius: 12px; background: #eef3ff; }
.sgl-paused .bi { color: #364fc7; }
.whole-heading { display: flex; align-items: center; gap: .5rem; margin: 1.2rem 0 .6rem; font-size: 1.2rem; }
.whole-heading .bi { color: #d9480f; }

/* The big Listen button of a segment: it must look like something to press. */
.sgl-play { display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .25rem 1.1rem .25rem .3rem; border: 2px solid #2b2b2b; border-radius: 999px; background: #ffd84d; box-shadow: 2px 2px 0 #2b2b2b; color: #2b2b2b; font: inherit; font-size: 1.05rem; font-weight: bold; cursor: pointer; transition: transform .1s, box-shadow .1s, background .15s; }
.sgl-play:hover { background: #ffcc1a; transform: translateY(-1px); box-shadow: 3px 3px 0 #2b2b2b; }
.sgl-play:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #2b2b2b; }
.sgl-play:focus-visible { outline: 3px solid #0d6efd; outline-offset: 3px; }
.sgl-play-icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #2b2b2b; color: #fff; font-size: 1.15rem; }
.sgl-play.again { background: #e9f7ef; border-color: #146c43; color: #146c43; box-shadow: 2px 2px 0 #146c43; }
.sgl-play.again:hover { background: #d3f0df; }
.sgl-play.again .sgl-play-icon { background: #146c43; }
.sgl-play.stop { background: #2b2b2b; color: #fff; }
.sgl-play.stop:hover { background: #444; }
.sgl-play.stop .sgl-play-icon { background: #fff; color: #2b2b2b; }
.sgl-length { display: inline-flex; align-items: center; gap: .3rem; }

/* Moving between the parts when typing: previous, next, or jump to any (works for 100 parts). */
.sgl-stepper { display: flex; align-items: stretch; gap: .5rem; }
.sgl-step { flex: none; width: 46px; border: 2px solid #2b2b2b; border-radius: 10px 4px 10px 4px; background: #fff; box-shadow: 2px 2px 0 #2b2b2b; color: #2b2b2b; font-size: 1.1rem; cursor: pointer; }
.sgl-step:hover:not(:disabled) { background: #fff1a8; }
.sgl-step:disabled { opacity: .4; cursor: default; box-shadow: none; }
.sgl-step:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }
.sgl-pick { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.sgl-pick-count { font-size: .8rem; font-weight: bold; color: #555; }
.sgl-pick select { width: 100%; min-height: 40px; padding: .3rem .5rem; border: 2px solid #2b2b2b; border-radius: 8px; background: #fff; font: inherit; font-weight: bold; }
.sgl-pick select:focus-visible { outline: 3px solid #0d6efd; outline-offset: 2px; }
.sgl-more { justify-self: center; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1.1rem; border: 2px dashed #2b2b2b; border-radius: 999px; background: #fff; color: #0b5ed7; font: inherit; font-weight: bold; cursor: pointer; }
.sgl-more:hover { background: #fff1a8; color: #2b2b2b; }
.sgl-more span { font-weight: normal; color: #555; }

@media (max-width: 520px) {
    .sgl { padding: .85rem .8rem; }
    .sgl-tools { display: grid; grid-template-columns: 1fr; gap: .6rem; }
    .sgl-tools .mode-picker { width: 100%; }
    .sgl-tools .mode-switch { display: flex; }
    .sgl-slow { justify-content: space-between; }
    .sgl-card { gap: .6rem; padding: .7rem .7rem; }
    .sgl-play { min-height: 48px; }
    .sgl-typing { padding: .7rem .7rem; }
}

/* Nothing inside the segments box may be wider than the box (a long part title in the dropdown used to push it out). */
.sgl { grid-template-columns: minmax(0, 1fr); }
.sgl-typing, .sgl-controls, .sgl-list, .sgl-body { min-width: 0; }
.sgl-pick select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
.sgl-pick, .sgl-stepper { min-width: 0; }
.sgl-typing, .sgl-body, .sgl-controls { grid-template-columns: minmax(0, 1fr); }
.sgl-card { grid-template-columns: auto minmax(0, 1fr); }