.task-list-workspace { overflow: visible; }
.task-page-titlebar { height: 38px; min-height: 38px; margin: 0 0 8px; padding: 0; align-items: center; gap: 10px; }
.task-page-titlebar .page-title h1 { margin: 0; color: #222633; font-size: 18px; font-weight: 900; line-height: 1.5; letter-spacing: -.3px; }
.task-start-zone { min-height: 100px; display: grid; grid-template-columns: 215px minmax(0, 1fr); gap: 24px; align-items: center; padding: 15px 16px; border-radius: 16px; background: rgba(255, 255, 255, .58); }
.start-zone-copy h2, .history-title h2 { margin: 0; font-size: 16px; line-height: 1.35; }
.start-zone-actions { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 12px; }
.start-task-option { min-width: 0; min-height: 68px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; gap: 11px; align-items: center; padding: 12px 14px; border: 0; border-radius: 13px; color: var(--text); text-align: left; text-decoration: none; transition: box-shadow .16s, transform .16s; }
.start-task-option.course { background: linear-gradient(110deg, #e2f1ff 0%, #cee6ff 100%); }
.start-task-option.homework { background: linear-gradient(110deg, #eee9ff 0%, #ddd6ff 100%); }
.start-task-option:hover { box-shadow: 0 8px 20px rgba(64, 76, 132, .075); transform: translateY(-1px); }
.starter-glyph { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, .82); color: #4e84c4; font-weight: 800; }
.start-task-option.homework .starter-glyph { color: #7258ba; }
.start-task-option strong, .start-task-option small { display: block; }
.start-task-option strong { font-size: 13px; }
.start-task-option small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.starter-arrow { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .78); color: #4e84c4; font-size: 17px; font-weight: 500; line-height: 1; }
.start-task-option.homework .starter-arrow { color: #7258ba; }
.task-history-toolbar { min-height: 52px; display: flex; align-items: center; gap: 18px; margin: 18px 0 8px; }
.history-title { min-width: 150px; display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; white-space: nowrap; }
.history-title span { display: inline-flex; align-items: baseline; gap: 2px; color: #8b94ad; font-size: 10px; }
.history-title span strong { color: #68728d; font-size: 12px; font-weight: 650; }
.history-controls { min-width: 0; display: flex; align-items: center; gap: 8px; flex: 0 1 auto; margin-left: auto; }
.header-filter-group { display: flex; align-items: center; gap: 8px; }
.filter-select { position: relative; width: 112px; height: 36px; flex: 0 0 112px; }
.filter-select::after { content: ""; position: absolute; top: 50%; right: 14px; width: 6px; height: 6px; border-right: 1.5px solid #8490aa; border-bottom: 1.5px solid #8490aa; pointer-events: none; transform: translateY(-70%) rotate(45deg); }
.header-filter-control { width: 100%; height: 36px; padding: 0 32px 0 14px; appearance: none; -webkit-appearance: none; border-color: #dfe5f2; border-radius: 999px; background-color: rgba(255, 255, 255, .36); color: #4d5672; font-size: 12px; line-height: 34px; box-shadow: none; }
.header-filter-control:hover { border-color: #cbd4e8; background-color: rgba(255, 255, 255, .72); }
.date-filter-wrap { position: relative; width: 170px; height: 36px; flex: 0 0 170px; }
.date-filter-button { width: 100%; height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px 0 14px; border: 1px solid #dfe5f2; border-radius: 999px; background: rgba(255, 255, 255, .36); color: #4d5672; font-size: 12px; text-align: left; }
.date-filter-button:hover, .date-filter-button[aria-expanded="true"] { border-color: #bcc7e0; background: rgba(255, 255, 255, .76); color: var(--primary-dark); }
.date-filter-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-filter-button svg, .date-picker-head svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.date-picker-popover { position: absolute; z-index: 30; top: calc(100% + 10px); right: 0; width: 620px; overflow: hidden; border: 1px solid #e0e6f2; border-radius: 18px; background: #fff; box-shadow: 0 22px 54px rgba(45, 56, 101, .18); }
.date-picker-head { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid #edf0f6; }
.date-picker-head strong, .date-picker-head span { display: block; }
.date-picker-head strong { font-size: 14px; }
.date-picker-head span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.date-picker-head svg { width: 19px; height: 19px; color: var(--primary); }
.date-picker-calendars { display: grid; grid-template-columns: 1fr 1fr; }
.calendar-month { padding: 18px 20px 16px; }
.calendar-month + .calendar-month { border-left: 1px solid #edf0f6; }
.calendar-month h3 { margin: 0 0 15px; text-align: center; font-size: 14px; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-weekdays { margin-bottom: 6px; }
.calendar-weekdays span { height: 24px; display: grid; place-items: center; color: #8b94ad; font-size: 10px; font-weight: 650; }
.calendar-blank, .calendar-day { height: 30px; }
.calendar-day { display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #424a65; font-size: 11px; }
.calendar-day:hover { background: #f0f3ff; color: var(--primary-dark); }
.calendar-day.in-range { border-radius: 0; background: #eef1ff; color: var(--primary-dark); }
.calendar-day.range-start, .calendar-day.range-end { background: var(--primary); color: #fff; font-weight: 650; }
.date-picker-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-top: 1px solid #edf0f6; }
.date-picker-footer > div { display: flex; gap: 8px; }
.date-picker-footer button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: transparent; color: #68728c; font-size: 12px; font-weight: 600; }
.date-picker-footer button:hover { background: #f3f5fa; }
.date-picker-footer .date-clear { color: #8a94ad; }
.date-picker-footer .date-confirm { min-width: 72px; background: var(--primary); color: #fff; }
.date-picker-footer .date-confirm:hover { background: var(--primary-dark); }
.date-picker-footer .date-confirm:disabled { opacity: .45; cursor: not-allowed; }
.search-wrap { position: relative; }
.search-icon { position: absolute; z-index: 1; top: 50%; left: 14px; width: 15px; height: 15px; fill: none; stroke: #8994ae; stroke-width: 1.6; stroke-linecap: round; transform: translateY(-50%); }
.search-wrap .control { padding-left: 38px; }
.header-search { width: clamp(220px, 15vw, 270px); flex: 0 1 270px; margin-left: 0; }
.header-search .control { height: 36px; border-color: #dfe5f2; border-radius: 999px; background: rgba(255, 255, 255, .36); box-shadow: none; font-size: 12px; }
.header-search .control:hover { border-color: #cbd4e8; background: rgba(255, 255, 255, .72); }
.header-refresh { width: 36px; min-height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .36); color: #75809f; }
.header-refresh svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.task-list-empty { min-height: max(360px, calc(100vh - 348px)); display: grid; place-items: center; align-content: center; gap: 9px; border-radius: 16px; background: rgba(255, 255, 255, .3); color: var(--muted); text-align: center; }
.task-empty-visual { width: 72px; height: 58px; margin-bottom: 3px; }
.task-empty-visual svg { width: 100%; height: 100%; fill: rgba(255, 255, 255, .7); stroke: #aab6d4; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.task-empty-visual svg circle { fill: #eef1ff; stroke: #7e8eea; }
.task-list-empty strong { display: block; color: #3c455f; font-size: 14px; }
.task-list-empty p { margin: 4px 0 0; color: #8a94ad; font-size: 11px; }

.task-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.task-card { --card-accent: #4e84c4; --card-tint: color-mix(in srgb, var(--blue-weak) 46%, #fff); position: relative; min-width: 0; padding: 16px; overflow: visible; border: 0; border-radius: 14px; outline: 0; background: var(--card-tint); box-shadow: 0 7px 20px rgba(64, 76, 132, .055); cursor: pointer; transition: box-shadow .16s, transform .16s; }
.task-card.homework { --card-accent: #7258ba; --card-tint: color-mix(in srgb, var(--purple-weak) 46%, #fff); }
.task-card:hover { box-shadow: 0 12px 28px rgba(64, 76, 132, .095); transform: translateY(-1px); }
.task-card:focus-visible { box-shadow: 0 0 0 3px rgba(91, 104, 246, .13), 0 10px 24px rgba(64, 76, 132, .075); }
.task-card:has(.card-more-menu) { z-index: 5; }
.task-card-top { display: grid; gap: 0; }
.task-card-heading { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-title-line { min-width: 0; display: flex; align-items: center; gap: 7px; }
.task-title-line h3 { position: relative; min-width: 0; flex: 0 1 auto; margin: 0; color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.35; }
.task-title-line h3 > span { position: relative; z-index: 1; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-title-line h3::after { content: ""; position: absolute; z-index: 0; left: 4px; bottom: -2px; width: clamp(48px, 52%, 82px); height: 10px; background: color-mix(in srgb, var(--card-accent) 26%, transparent); clip-path: polygon(0 42%, 94% 8%, 100% 68%, 7% 100%); transform: rotate(-1deg) skewX(-8deg); }
.task-card .task-type { min-height: 20px; flex: 0 0 auto; padding: 0 6px; background: rgba(255, 255, 255, .68); color: var(--card-accent); font-size: 10px; font-weight: 600; }
.task-card .task-target-meta { margin-top: 13px; }
.task-time-line { min-width: 0; display: flex; align-items: center; gap: 5px; margin-top: 9px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.task-time-line i { color: var(--muted-soft); font-style: normal; }
.deadline-reached-tag { min-height: 18px; display: inline-flex; align-items: center; margin-left: 3px; padding: 0 6px; border-radius: 6px; background: #f7f0e7; color: #8f6f48; font-size: 9px; font-weight: 650; line-height: 1; }
.task-target-meta { min-width: 0; display: flex; align-items: center; gap: 8px; color: #838bab; font-size: 11px; font-weight: 400; line-height: 18px; }
.task-target-meta span:first-child { flex-shrink: 0; }
.task-target-meta span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-target-meta i { width: 1px; height: 8px; flex-shrink: 0; background: #dfe3f0; }
.task-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; padding-top: 11px; border-top: 1px solid rgba(122, 137, 174, .12); }
.card-view-button { min-height: 28px; display: inline-flex; align-items: center; gap: 5px; padding: 0 4px 0 8px; border: 0; border-radius: 7px; background: transparent; color: var(--card-accent); font-size: 11px; font-weight: 650; white-space: nowrap; }
.card-view-button:hover { background: rgba(255, 255, 255, .52); color: var(--primary-dark); }
.task-card.homework .card-view-button:hover { color: #5e42aa; }
.card-view-button b { font-size: 19px; font-weight: 400; line-height: 1; }
.card-more-wrap { position: relative; flex: 0 0 auto; }
.card-more-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #7e88a3; transition: color .16s, border-color .16s, background .16s, box-shadow .16s; }
.card-more-button svg { width: 18px; height: 18px; fill: currentColor; }
.card-more-button:hover { border-color: rgba(123, 139, 175, .16); background: rgba(255, 255, 255, .66); color: #505a75; }
.card-more-button[aria-expanded="true"] { border-color: rgba(91, 104, 246, .2); background: #fff; color: var(--primary-dark); box-shadow: 0 5px 14px rgba(57, 67, 112, .1); }
.card-more-menu { position: absolute; z-index: 8; top: 38px; right: 0; width: 152px; padding: 6px; overflow: hidden; border: 1px solid #e0e6f1; border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(38, 47, 87, .18); transform-origin: top right; animation: card-menu-in .14s ease-out; }
.card-more-menu button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #424b66; text-align: left; font-size: 12px; font-weight: 550; transition: color .14s, background .14s; }
.card-more-menu button svg { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card-more-menu button:hover { background: #f5f7fb; color: var(--text); }
.card-more-menu button.disabled-item, .card-more-menu button.disabled-item:hover { cursor: not-allowed; background: transparent; color: #a8afc1; opacity: .72; }
.card-more-menu .danger-item { margin-top: 3px; border-top: 1px solid #edf0f6; border-radius: 0 0 8px 8px; color: var(--red); }
.card-more-menu .danger-item:first-child { margin-top: 0; border-top: 0; border-radius: 8px; }
.card-more-menu .danger-item:hover { background: var(--red-weak); color: #c7464d; }
@keyframes card-menu-in { from { opacity: 0; transform: translateY(-5px) scale(.98); } }

.create-page-header { min-height: 48px; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.create-page-header h1 { margin: 0; font-size: 22px; }
.course-task-information { flex: 0 0 auto; margin-bottom: 14px; padding: 16px 20px 18px; border: 1px solid #e5e9f2; background: #fff; box-shadow: 0 4px 14px rgba(64, 76, 132, .025); }
.course-task-information-head { min-height: 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.course-task-information-head h2 { margin: 0; }
.course-task-information-head h2 { color: #343c56; font-size: 16px; }
.course-task-state { min-height: 25px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 999px; background: #f0f1f5; color: #6f7892; font-size: 10px; font-weight: 650; }
.task-setting-field { min-width: 0; display: grid; gap: 6px; }
.task-setting-field > span { color: #727c98; font-size: 11px; font-weight: 650; }
.task-setting-field > span em { margin-left: 2px; color: #e15b64; font-style: normal; }
.task-setting-field > small { color: #929bb2; font-size: 9px; }
.task-setting-field .control { height: 38px; font-size: 12px; }
.task-setting-field.is-hidden { display: none; }
.course-task-readonly { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(100px, .7fr); gap: 10px; align-items: stretch; }
.course-task-readonly > div { min-width: 0; min-height: 52px; padding: 4px 0 7px; border-bottom: 1px solid #edf0f5; }
.course-task-readonly small, .course-task-readonly strong { display: block; }
.course-task-readonly small { color: #8a93aa; font-size: 9px; }
.course-task-readonly strong { margin-top: 4px; overflow: hidden; color: #4b536b; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.course-deadline-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .62fr); gap: 24px; align-items: end; margin-top: 11px; }
.course-deadline-context { align-items: end; }
.course-field-error { color: #d64f59 !important; font-size: 9px; font-weight: 600; }
.task-setting-field.has-error .control { border-color: #e4868c; box-shadow: 0 0 0 3px rgba(214, 79, 89, .07); }
.deadline-edit-focus .control { border-color: #9eacf8; box-shadow: 0 0 0 3px rgba(91, 104, 246, .05); }
.deadline-edit-focus > span { color: var(--primary-dark); }
.course-task-heading { min-width: 0; }
.course-task-title { min-width: 0; display: flex; align-items: center; gap: 8px; }
.content-selection-head .course-task-title h2 { max-width: min(620px, 52vw); overflow: hidden; color: #353d56; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.course-title-edit-button { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #9aa4bd; }
.course-title-edit-button:hover { background: #edf1ff; color: #6170e1; }
.course-title-edit-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.course-task-title.editing { position: relative; width: min(560px, 54vw); display: grid; grid-template-columns: minmax(0, 1fr) 32px 32px; gap: 6px; }
.course-task-title.editing .control { height: 38px; font-size: 14px; font-weight: 650; }
.course-task-title.editing button { width: 32px; height: 32px; align-self: center; padding: 0; border: 0; border-radius: 8px; background: #eef1ff; color: #5968dc; font-size: 13px; }
.course-task-title.editing button[data-action="cancel-course-title"] { background: #f3f4f7; color: #7c849a; }
.course-task-title.editing .course-field-error { position: absolute; top: 42px; left: 2px; }
.course-scene-switcher { position: fixed; z-index: 20; top: 24px; right: 32px; min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; border: 1px solid rgba(214, 222, 240, .9); border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 8px 24px rgba(64, 76, 132, .1); backdrop-filter: blur(12px); }
.course-scene-switcher > span { color: var(--muted); font-size: 11px; font-weight: 600; }
.course-scene-switcher > div { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: #eef1f8; }
.course-scene-switcher button { min-width: 52px; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent; color: #737d99; font-size: 12px; font-weight: 650; }
.course-scene-switcher button.active { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 7px rgba(49, 59, 102, .1); }
.compose-scope { min-height: 68px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: end; margin-bottom: 18px; padding: 0; }
.scope-field, .scope-student-field { min-width: 0; display: grid; gap: 6px; }
.scope-field > span, .scope-student-head > span { color: #727c98; font-size: 11px; font-weight: 650; }
.scope-field > .control { width: 100%; height: 44px; border-color: #dbe2f0; border-radius: 10px; font-weight: 600; box-shadow: 0 2px 5px rgba(64, 76, 132, .035); }
.scope-student-field { position: relative; }
.scope-student-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scope-student-head small { color: #8b94ad; font-size: 10px; font-weight: 550; }
.scope-student-trigger, .scope-student-single { width: 100%; height: 44px; min-width: 0; border: 1px solid #dbe2f0; border-radius: 10px; background: #fff; box-shadow: 0 2px 5px rgba(64, 76, 132, .035); }
.scope-student-trigger { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 0 12px; overflow: hidden; outline: 0; color: #4d5878; text-align: left; }
.scope-student-trigger:hover { border-color: #c5cee1; }
.scope-student-trigger:focus-visible, .scope-student-field.open .scope-student-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(93, 101, 237, .08); }
.scope-student-trigger:disabled { cursor: not-allowed; opacity: .62; }
.scope-student-single { display: flex; align-items: center; gap: 9px; padding: 0 10px; background: linear-gradient(90deg, #fbfcff, #fff); }
.scope-student-single > span:nth-child(2) { min-width: 0; flex: 1; }
.scope-student-single strong, .scope-student-single small { display: block; }
.scope-student-single strong { color: #48516b; font-size: 12px; }
.scope-student-single small { margin-top: -1px; color: #929bb2; font-size: 9px; }
.scope-student-single em { min-height: 21px; display: inline-flex; align-items: center; padding: 0 7px; border-radius: 999px; background: #edf8f4; color: #397c6a; font-size: 9px; font-style: normal; font-weight: 650; }
.scope-student-avatar, .scope-student-option-avatar { display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(145deg, #7380f6, #5968dc); color: #fff; font-weight: 700; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.scope-student-avatar { width: 29px; height: 29px; font-size: 11px; }
.scope-student-trigger-main { min-width: 0; display: flex; align-items: center; gap: 10px; flex: 1; }
.scope-student-trigger-copy { min-width: 0; display: block; }
.scope-student-trigger-copy strong, .scope-student-trigger-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope-student-trigger-copy strong { color: #48516b; font-size: 12px; }
.scope-student-trigger-copy small { margin-top: -1px; color: #929bb2; font-size: 9px; }
.scope-student-trigger-copy.partial { flex: 0 0 auto; }
.scope-student-avatar-stack { min-width: 72px; display: flex; align-items: center; padding-left: 2px; }
.scope-student-avatar-stack i { width: 27px; height: 27px; display: grid; place-items: center; margin-left: -5px; border: 2px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #7d8af7, #5b68e8); color: #fff; font-size: 9px; font-style: normal; font-weight: 700; box-shadow: 0 2px 6px rgba(76, 89, 177, .14); }
.scope-student-avatar-stack i:first-child { margin-left: 0; }
.scope-student-value { min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; flex: 1; }
.scope-student-tag, .scope-student-overflow { min-width: 0; min-height: 24px; display: inline-flex; align-items: center; flex: 0 1 auto; padding: 0 8px; overflow: hidden; border-radius: 6px; background: #eef1ff; color: #4f5fd4; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.scope-student-tag { max-width: 112px; }
.scope-student-overflow { flex: 0 0 auto; background: #f2f4f8; color: #68728e; }
.scope-student-placeholder { color: #9aa3b8; font-size: 12px; }
.scope-student-arrow { width: 7px; height: 7px; flex: 0 0 auto; margin: -4px 2px 0 4px; border-right: 1.5px solid #8490aa; border-bottom: 1.5px solid #8490aa; transform: rotate(45deg); transition: transform .16s; }
.scope-student-field.open .scope-student-arrow { margin-top: 4px; transform: rotate(225deg); }
.scope-student-dropdown { position: absolute; z-index: 45; top: calc(100% + 7px); left: 0; width: 100%; min-width: 430px; padding: 0; overflow: hidden; border: 1px solid #dce3f0; border-radius: 13px; background: #fff; box-shadow: 0 20px 48px rgba(45, 56, 101, .18); transform-origin: top center; animation: student-dropdown-in .15s ease-out; }
@keyframes student-dropdown-in { from { opacity: 0; transform: translateY(-5px) scale(.985); } }
.scope-student-dropdown-head { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #edf0f6; }
.scope-student-dropdown-head > span { min-width: 0; }
.scope-student-dropdown-head strong, .scope-student-dropdown-head small { display: block; }
.scope-student-dropdown-head strong { color: #3f4862; font-size: 13px; }
.scope-student-dropdown-head small { margin-top: 1px; color: #929bb2; font-size: 10px; }
.scope-student-dropdown-head b { min-width: 40px; min-height: 24px; display: grid; place-items: center; border-radius: 999px; background: #eef1ff; color: #5664df; font-size: 10px; }
.scope-student-search { position: relative; display: block; margin: 10px 12px 7px; }
.scope-student-search svg { position: absolute; top: 50%; left: 11px; width: 15px; height: 15px; fill: none; stroke: #909ab3; stroke-width: 1.6; stroke-linecap: round; transform: translateY(-50%); }
.scope-student-search input { width: 100%; height: 36px; padding: 0 11px 0 34px; border: 1px solid #e0e5f0; border-radius: 9px; outline: 0; background: #f8f9fc; color: #454e68; font-size: 11px; }
.scope-student-search input:focus { border-color: #aeb8fc; background: #fff; box-shadow: 0 0 0 3px rgba(91, 104, 246, .06); }
.scope-student-quick-actions { min-height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; }
.scope-student-quick-actions button { padding: 4px 0; border: 0; background: transparent; color: #5868dd; font-size: 10px; font-weight: 650; }
.scope-student-quick-actions button:last-child { color: #8c95aa; }
.scope-student-quick-actions button:disabled { cursor: default; opacity: .38; }
.scope-student-options { max-height: 250px; display: grid; gap: 2px; overflow-y: auto; padding: 0 7px 7px; overscroll-behavior: contain; }
.scope-student-option { position: relative; min-height: 47px; display: flex; align-items: center; gap: 10px; padding: 5px 9px; border-radius: 9px; color: #4d5878; cursor: pointer; }
.scope-student-option:hover { background: #f5f7fc; }
.scope-student-option[hidden], .scope-student-no-result[hidden] { display: none; }
.scope-student-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.scope-student-option-avatar { width: 30px; height: 30px; font-size: 10px; }
.scope-student-option-copy { min-width: 0; flex: 1; }
.scope-student-option-copy strong, .scope-student-option-copy small { display: block; }
.scope-student-option-copy strong { color: #48516b; font-size: 12px; }
.scope-student-option-copy small { margin-top: 1px; color: #959db0; font-size: 9px; }
.scope-student-check, .scope-student-unavailable { width: 19px; height: 19px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid #d4dbea; border-radius: 6px; color: transparent; font-size: 11px; font-style: normal; }
.scope-student-option:has(input:checked) { background: #f0f3ff; color: #4f5fd4; }
.scope-student-option:has(input:checked) .scope-student-check { border-color: var(--primary); background: var(--primary); color: #fff; }
.scope-student-option.unavailable { cursor: not-allowed; opacity: .62; }
.scope-student-option.unavailable:hover { background: transparent; }
.scope-student-option.unavailable .scope-student-option-avatar { background: #aeb5c5; }
.scope-student-unavailable { border-color: #ead9b9; background: #fff8ea; color: #a27632; font-weight: 700; }
.scope-student-no-result { min-height: 90px; display: grid; place-items: center; color: #969fb3; font-size: 11px; }
.scope-student-dropdown-foot { min-height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 8px 15px; border-top: 1px solid #edf0f6; background: #fbfcff; color: #7b849c; font-size: 10px; }
.scope-student-dropdown-foot strong { color: #4d5ad0; }
.scope-student-dropdown-foot button { min-width: 68px; height: 32px; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 650; box-shadow: 0 6px 14px rgba(91, 104, 246, .15); }
.scope-student-field.has-error .scope-student-trigger, .scope-student-field.has-error .scope-student-single { border-color: #e4868c; box-shadow: 0 0 0 3px rgba(214, 79, 89, .07); }
.scope-student-field.open .scope-target-error { display: none; }
.scope-target-error { position: absolute; top: calc(100% + 3px); left: 2px; }

.compose-workspace { min-height: 610px; display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 20px; overflow: visible; }
.compose-workspace.without-source { grid-template-columns: minmax(0, 1fr); }
.create-route .compose-workspace { flex: 1; min-height: 0; overflow: hidden; }
.compose-main { min-width: 0; height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #fbfcff; box-shadow: 0 10px 30px rgba(64, 76, 132, .045); }
.content-selection-head { position: relative; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 22px; border-bottom: 1px solid #edf0f6; background: #fff; }
.content-selection-head h2 { margin: 0; font-size: 16px; }
.content-selection-title { min-width: 0; display: flex; align-items: center; gap: 8px; }
.content-lock-tag { min-height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: #eff1f5; color: #747d94; font-size: 9px; font-weight: 650; }
.content-selection-meta { display: flex; align-items: center; gap: 16px; }
.content-selection-summary { color: var(--muted); font-size: 12px; font-weight: 600; }
.content-course-add { flex: 0 0 auto; }
.compose-main.has-content-error { border-color: #e6a1a6; box-shadow: 0 0 0 3px rgba(214, 79, 89, .06); }
.content-selection-head .content-error { position: absolute; bottom: 4px; left: 22px; }
.compose-main-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px; background: #fbfcff; scrollbar-gutter: stable; }
.selected-content-list { display: grid; gap: 11px; }
.selected-content-card { display: grid; grid-template-columns: 28px 38px minmax(0, 1fr) auto auto; gap: 11px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.order-index { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #f0f3fb; color: #7c86a3; font-size: 11px; font-weight: 700; }
.resource-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--primary-weak); color: var(--primary); font-weight: 800; }
.resource-icon.practice { background: #f1edff; color: #7659d1; }
.resource-icon.homework { background: var(--cyan-weak); color: var(--cyan); }
.resource-icon.challenge { background: #fff2d5; color: #a76910; }
.resource-main { min-width: 0; }
.resource-main strong, .resource-main small { display: block; }
.resource-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-main small { margin-top: 3px; color: var(--muted); font-size: 12px; }
.duration-pill { padding: 5px 8px; border-radius: 8px; background: var(--surface-soft); color: var(--muted); font-size: 11px; }
.remove-action { border: 0; background: transparent; color: #9199af; font-size: 12px; }
.remove-action:hover { color: var(--red); }
.origin-tag { display: inline-flex; align-items: center; min-height: 20px; margin-left: 7px; padding: 0 6px; border-radius: 6px; background: #f1f3f8; color: #75809c; font-size: 10px; font-style: normal; font-weight: 600; vertical-align: 1px; }
.origin-tag.diagnosis { background: #edf0ff; color: #5664e7; }
.origin-tag.manual { background: #f2f4f8; color: #7a849d; }
.origin-tag.smart { background: #f0edff; color: #7255d0; }
.compose-empty { min-height: 300px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.compose-empty > span { width: 54px; height: 42px; display: grid; place-items: center; margin-bottom: 10px; border: 6px solid #e6edff; color: #9eabd3; }
.compose-empty strong { color: #69728e; }
.compose-empty p { margin: 5px 0 0; font-size: 12px; }

.task-content-empty { min-height: 440px; }
.task-content-empty .task-content-empty-visual { position: relative; width: 96px; height: 78px; margin-bottom: 18px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.task-content-empty-visual::before { content: ""; position: absolute; left: 12px; top: 4px; width: 68px; height: 50px; border: 8px solid #e4ecff; background: #fff; box-shadow: 0 8px 18px rgba(94, 112, 165, .08); }
.task-content-empty-visual::after { content: ""; position: absolute; right: 7px; bottom: 5px; width: 18px; height: 9px; border-radius: 100% 0 100% 0; background: #67c96f; transform: rotate(22deg); }
.task-content-empty-visual i { position: absolute; z-index: 1; left: 38px; width: 34px; height: 5px; border-radius: 999px; background: #edf2ff; }
.task-content-empty-visual i:first-child { top: 27px; }
.task-content-empty-visual i:last-child { top: 42px; }
.task-content-empty strong { color: #7f8aa9; font-size: 16px; }
.task-content-empty p { margin-top: 10px; color: #8f99b5; font-size: 13px; }

.source-panel { min-width: 0; padding: 18px; background: #f4f6ff; }
.compose-workspace > .source-panel { border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(64, 76, 132, .045); }
.create-route .compose-workspace > .source-panel { height: 100%; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.locked-course-source { display: grid; place-items: center; align-content: center; padding: 34px; background: #f6f7fb; color: #747d95; text-align: center; }
.locked-course-source-icon { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 13px; border-radius: 16px; background: #fff; color: #7d8496; font-size: 13px; font-weight: 800; box-shadow: 0 8px 24px rgba(64, 76, 132, .07); }
.locked-course-source > strong { color: #4f576e; font-size: 15px; }
.locked-course-source > p { max-width: 320px; margin: 7px 0 0; font-size: 11px; line-height: 1.7; }
.locked-course-source-rule { width: min(320px, 100%); display: grid; gap: 3px; margin-top: 18px; padding: 12px; border: 1px solid #e1e4eb; border-radius: 10px; background: rgba(255, 255, 255, .72); text-align: left; }
.locked-course-source-rule small { color: #8c94a8; font-size: 9px; }
.locked-course-source-rule span { color: #5f677d; font-size: 10px; font-weight: 600; }
.source-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.source-head h2 { margin: 0; font-size: 15px; }
.source-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.homework-source { min-height: 610px; padding: 18px; background: #f4f7fe; }
.homework-source-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.homework-source-intro h2 { margin: 0; color: #484e68; font-size: 16px; }
.homework-source-intro p { max-width: 270px; margin: 4px 0 0; color: #838bab; font-size: 11px; line-height: 1.5; }
.homework-entry-list { display: grid; gap: 10px; margin-top: 18px; }
.homework-entry-card { width: 100%; min-height: 90px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 16px; gap: 12px; align-items: center; padding: 14px; border: 1px solid #e0e5f2; border-radius: 12px; background: #fff; color: #484e68; text-align: left; box-shadow: 0 3px 10px rgba(64, 76, 132, .04); transition: border-color .16s, box-shadow .16s, transform .16s; }
.homework-entry-card:hover { border-color: #bfc8fb; box-shadow: 0 10px 24px rgba(74, 87, 161, .09); transform: translateY(-1px); }
.homework-entry-card:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.homework-entry-card > b { color: #9aa3bd; font-size: 22px; font-weight: 300; }
.homework-entry-visual { position: relative; width: 44px; height: 44px; display: grid; align-content: center; gap: 4px; padding: 10px; border-radius: 12px; background: #edf1ff; }
.homework-entry-card.manual .homework-entry-visual { background: #f1edff; }
.homework-entry-visual::before { content: ""; position: absolute; right: 6px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(73, 86, 158, .12); }
.homework-entry-visual i { height: 3px; border-radius: 999px; background: #7c88f6; }
.homework-entry-card.manual .homework-entry-visual i { background: #856ad6; }
.homework-entry-visual i:nth-child(2) { width: 78%; }
.homework-entry-visual i:nth-child(3) { width: 56%; }
.homework-entry-copy { min-width: 0; display: block; }
.homework-entry-copy strong, .homework-entry-copy small { display: block; }
.homework-entry-copy strong { font-size: 14px; }
.homework-entry-copy small { margin-top: 4px; color: #7d87a4; font-size: 11px; line-height: 1.5; }
.chapter-select { display: grid; gap: 3px; margin-top: 16px; padding: 12px; border: 1px solid #dce3f5; border-radius: 11px; background: #fff; }
.chapter-select span { color: var(--muted); font-size: 11px; }
.chapter-select strong { font-size: 13px; }
.source-list, .question-source-list { display: grid; gap: 9px; margin-top: 13px; }
.source-item { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 12px; border: 1px solid #e3e7f3; border-radius: 11px; background: #fff; }
.source-item.selected { border-color: #bdc7fa; background: #fbfbff; }
.source-item-main { min-width: 0; display: flex; align-items: center; gap: 10px; }
.source-item-main > span:last-child { min-width: 0; }
.source-item-main strong, .source-item-main small { display: block; }
.source-item-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.source-item-main small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.source-item-main em { display: block; margin-top: 3px; color: #929bb3; font-size: 10px; font-style: normal; }
.source-item .resource-icon { width: 34px; height: 34px; flex: 0 0 auto; }
.source-tabs { display: flex; gap: 4px; margin-top: 15px; padding: 4px; border-radius: 10px; background: #e9edfa; }
.source-tabs button { flex: 1; height: 31px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; }
.source-tabs button.active { background: #fff; color: var(--primary-dark); box-shadow: 0 3px 9px rgba(68, 79, 129, .08); }
.diagnosis-context { display: grid; gap: 3px; margin-top: 12px; padding: 12px; border: 1px solid #dce3f5; border-radius: 11px; background: #fff; }
.diagnosis-context span { color: var(--primary); font-size: 10px; font-weight: 650; }
.diagnosis-context strong { font-size: 12px; }
.diagnosis-context p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }

.selected-content-card.selected-course-row { min-height: 72px; grid-template-columns: 22px minmax(0, 1fr) 68px 28px; gap: 11px; padding: 10px 15px; border-color: #dfe3f0; border-radius: 9px; }
.course-drag-handle { color: #aeb6d2; font-size: 18px; cursor: grab; }
.selected-course-row .resource-main strong { font-size: 14px; }
.selected-course-row .resource-main small { display: flex; align-items: center; gap: 5px; margin-top: 4px; color: #838bab; }
.course-type-glyph { width: 14px; height: 14px; display: inline-grid; place-items: center; border: 1.4px solid currentColor; border-radius: 50%; font-size: 8px; font-style: normal; }
.course-preview-button { min-width: 62px; height: 29px; padding: 0 12px; border: 1px solid #dfe3f0; border-radius: 999px; background: #fff; color: #646b8a; font-size: 11px; }
.course-preview-button:hover { border-color: #aeb8fc; background: #f9faff; color: var(--primary-dark); }
.course-remove-button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #68708f; font-size: 20px; font-weight: 300; }
.course-remove-button:hover { background: #fff2f2; color: var(--red); }
.homework-group-list { gap: 14px; }
.selected-content-card.selected-homework-row { min-height: 68px; grid-template-columns: 20px 36px minmax(0, 1fr) 68px 28px; gap: 10px; padding: 9px 14px; border-color: #dfe3f0; border-radius: 10px; background: #fff; }
.homework-group-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; background: #f0edff; color: #7255d0; font-size: 12px; font-weight: 800; }
.selected-homework-row .resource-main strong { font-size: 13px; }
.selected-homework-row .resource-main small { margin-top: 4px; color: #838bab; font-size: 11px; }
.homework-preview-button { min-width: 62px; height: 29px; padding: 0 12px; border: 1px solid #dfe3f0; border-radius: 999px; background: #fff; color: #646b8a; font-size: 11px; }
.homework-preview-button:hover { border-color: #b9acf1; background: #fbfaff; color: #694bbd; }

.homework-preview-route { height: 100vh; overflow: hidden; background: #f6f7fb; }
.homework-preview-shell { width: 100%; height: 100vh; padding: 20px 24px 26px; }
.homework-preview-page { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 16px; }
.homework-preview-header { min-height: 44px; display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.homework-preview-header h1 { min-width: 0; margin: 0; overflow: hidden; color: #252a40; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.preview-workspace { min-height: 0; flex: 1; display: grid; grid-template-columns: 250px minmax(0, 1fr); overflow: hidden; border: 1px solid #dfe3ef; border-radius: 14px; background: #fff; }
.preview-group-nav { min-height: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; padding: 20px 14px; border-right: 1px solid #e2e5ef; overscroll-behavior: contain; }
.preview-group-nav button { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 0; border-radius: 7px; background: transparent; color: #525a73; text-align: left; }
.preview-group-nav button:hover { background: #f4f6ff; }
.preview-group-nav button.active { background: #edf0ff; color: #5f6ff2; }
.preview-group-nav strong { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.preview-group-nav small { flex: 0 0 auto; color: #8b94ae; font-size: 10px; }
.preview-question-stage { min-width: 0; min-height: 0; overflow-y: auto; padding: 20px 22px 32px; overscroll-behavior: contain; scrollbar-gutter: stable; }
.preview-question-stage > h2 { margin: 0 0 14px; color: #5f6ff2; font-size: 14px; }
.preview-question-list { display: grid; gap: 14px; }
.preview-question-card { padding: 18px 20px 0; overflow: hidden; border-radius: 13px; background: #f4f6ff; color: #252a40; }
.preview-question-stem { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; align-items: start; }
.preview-question-stem > span { padding-top: 1px; color: #48506a; font-size: 15px; font-weight: 700; }
.preview-question-stem strong { font-size: 14px; font-weight: 650; line-height: 1.75; }
.preview-question-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 22px; margin: 19px 0 17px 37px; }
.preview-question-options span { min-width: 0; overflow: hidden; color: #343a52; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.preview-question-instruction { margin: 14px 0 15px 37px; color: #69718c; font-size: 11px; }
.preview-question-tags { display: flex; gap: 7px; margin: 0 0 17px 37px; }
.preview-question-tags span { padding: 3px 7px; border-radius: 5px; background: #e9ecf5; color: #68718b; font-size: 10px; }
.preview-question-actions { min-height: 53px; display: flex; align-items: center; justify-content: flex-end; gap: 13px; border-top: 1px dashed #e0e4ef; }
.preview-question-actions button { height: 30px; border: 0; background: transparent; color: #59617a; font-size: 11px; }
.preview-question-actions button span { margin-left: 3px; color: #8a93ac; }
.preview-question-actions .question-feedback-button { padding: 0 14px; border: 1px solid #dce1ee; border-radius: 999px; background: #fff; }
.preview-answer-panel { margin: 0 -20px; padding: 13px 20px 15px 57px; border-top: 1px solid #e1e5f0; background: #fff; }
.preview-answer-panel strong { color: #4e5771; font-size: 11px; }
.preview-answer-panel p { margin: 5px 0 0; color: #727b95; font-size: 11px; line-height: 1.65; }
.homework-preview-empty { min-height: 320px; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; }
.homework-preview-empty p { margin: 0; color: var(--muted); }

@media (max-width: 760px) {
  .homework-preview-shell { padding: 14px; }
  .preview-workspace { grid-template-columns: 1fr; }
  .preview-group-nav { max-height: 130px; border-right: 0; border-bottom: 1px solid #e2e5ef; }
  .preview-question-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.course-recommend-panel { min-height: 610px; padding: 0; overflow: hidden; background: #f4f7fe; }
.course-recommend-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 20px 13px; }
.course-recommend-title { display: flex; align-items: center; gap: 6px; }
.course-recommend-title h2 { margin: 0; color: #484e68; font-size: 16px; line-height: 24px; }
.course-recommend-head p { margin: 2px 0 0; color: #838bab; font-size: 11px; }
.course-info-icon { width: 16px; height: 16px; display: grid; place-items: center; border: 1.5px solid #8993b1; border-radius: 50%; color: #76809f; font-size: 10px; font-weight: 700; }
.course-update-button { height: 23px; padding: 0 8px; border: 1px solid #dfe3f0; border-radius: 999px; background: #fff; color: #646b8a; font-size: 10px; }
.course-add-button { height: 32px; display: inline-flex; align-items: center; gap: 4px; padding: 0 13px; border: 1px solid #cfd5e8; border-radius: 999px; background: #fff; color: #5a6280; font-size: 12px; font-weight: 650; }
.course-add-button span { font-size: 18px; font-weight: 300; }
.course-add-button:hover { border-color: #aeb8fc; color: var(--primary-dark); }
.course-plan-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: 0 20px 14px; padding: 3px; border-radius: 999px; background: #e9ecf5; }
.course-plan-tabs button { height: 34px; border: 0; border-radius: 999px; background: transparent; color: #646b8a; font-size: 12px; font-weight: 650; }
.course-plan-tabs button.active { background: #fff; color: var(--primary-dark); box-shadow: 0 2px 7px rgba(16, 18, 25, .08); }
.course-recommend-list { display: grid; gap: 12px; max-height: 485px; overflow: auto; padding: 0 20px 20px; }
.course-recommend-card { min-height: 86px; display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid #e9ecf5; border-radius: 10px; background: #fff; box-shadow: 0 2px 8px rgba(16, 18, 25, .04); cursor: pointer; }
.course-recommend-card:hover { border-color: #d8ddef; background: #fbfcff; }
.course-recommend-card.learned { cursor: default; }
.course-check { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #cfd5e8; border-radius: 4px; background: #fff; color: #fff; font-size: 12px; }
.course-check.checked { border-color: var(--primary); background: var(--primary); }
.course-check.readonly { opacity: .42; }
.course-recommend-main { min-width: 0; flex: 1; }
.course-recommend-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 550; }
.course-recommend-main small { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 4px; color: #838bab; font-size: 11px; }
.course-recommend-main small b { color: #cbd0df; font-weight: 400; }
.course-recommend-main small em { padding: 2px 5px; border-radius: 3px; background: #f0f2f7; color: #646b8a; font-size: 10px; font-style: normal; }
.course-recommend-card.learned .course-recommend-main { opacity: .56; }

.course-diagnosis-empty { min-height: 430px; display: grid; place-items: center; align-content: center; padding: 28px; text-align: center; }
.course-diagnosis-empty > strong { color: #484e68; font-size: 15px; }
.course-diagnosis-empty > p { max-width: 310px; margin: 8px 0 18px; color: #838bab; font-size: 12px; line-height: 1.75; }
.course-diagnosis-empty > div { display: flex; gap: 9px; }
.course-diagnosis-visual { width: 78px; height: 78px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 24px; background: #e9edff; color: #7c88d8; font-size: 32px; }
.course-diagnosis-visual.ready { background: #e9f7ef; color: #36a36a; }
.course-diagnosis-card { margin: 4px 20px 20px; padding: 18px; border: 1px dashed #cfd5e8; border-radius: 12px; background: rgba(255,255,255,.82); }
.course-diagnosis-card > div:first-child { display: flex; align-items: center; gap: 8px; }
.course-diagnosis-card > div:first-child > span { padding: 3px 7px; border-radius: 4px; background: #fff5df; color: #a46e2a; font-size: 10px; }
.course-diagnosis-card > div:first-child > span.expired { background: #fff0f0; color: #c45454; }
.course-diagnosis-card > p { color: #646b8a; font-size: 12px; line-height: 1.75; }
.course-diagnosis-card dl { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 9px; margin: 16px 0; font-size: 11px; }
.course-diagnosis-card dt { color: #838bab; }
.course-diagnosis-card dd { min-width: 0; display: flex; align-items: center; gap: 6px; margin: 0; color: #555b6e; }
.course-diagnosis-card dd em { min-width: 0; overflow: hidden; color: var(--primary); text-overflow: ellipsis; white-space: nowrap; font-style: normal; }
.course-diagnosis-card dd button { padding: 3px 7px; border: 0; border-radius: 4px; background: #eef1ff; color: var(--primary); font-size: 10px; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.course-modal-backdrop { padding: 24px 16px; background: rgba(24, 29, 45, .34); backdrop-filter: none; }
.course-picker-modal { width: min(1200px, 80vw); height: min(850px, 80vh); min-height: 650px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(222, 226, 238, .9); border-radius: 16px; background: #fff; box-shadow: 0 18px 54px rgba(26, 32, 54, .16); }
.course-modal-head { min-height: 52px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 10px 20px 8px; border-bottom: 1px solid #eceff6; }
.course-modal-head h2 { margin: 0; color: #252a3b; font-size: 18px; font-weight: 800; }
.course-modal-head .drawer-close { background: transparent; color: #858da4; font-size: 24px; font-weight: 300; }
.course-modal-head .drawer-close:hover { background: #f3f5f9; color: #4c546b; }
.course-picker-modal > .course-modal-head { min-height: 64px; padding: 0 22px; border-bottom: 0; }
.course-picker-modal > .course-modal-head h2 { font-size: 19px; }
.course-picker-modal > .course-modal-head .drawer-close { width: 34px; height: 34px; font-size: 26px; }
.course-catalog-layout { min-height: 0; display: grid; grid-template-columns: 320px minmax(0, 1fr); flex: 1; margin: 0 20px; overflow: hidden; border: 1px solid #e4e8f2; border-radius: 14px; background: #fff; }
.course-catalog-sidebar { min-height: 0; padding: 20px 20px 22px; overflow: auto; border-right: 1px solid #e4e8f2; background: #fff; }
.course-book-select { display: block; }
.course-book-select .control { height: 40px; padding: 0 13px; border-color: #dfe4ef; border-radius: 8px; background-color: #fff; color: #343a4f; font-size: 12px; font-weight: 550; }
.course-chapter-tree { display: grid; gap: 3px; margin-top: 12px; }
.course-chapter-node { min-width: 0; }
.course-chapter-tree button { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: #343a4d; text-align: left; font-size: 12px; font-weight: 600; }
.course-chapter-tree button > span, .course-tree-section-row > span { width: 12px; flex: 0 0 12px; color: #747d99; font-size: 13px; transition: transform .15s ease; }
.course-chapter-tree button:hover { background: #f5f7fb; }
.course-chapter-tree .course-chapter-root.active { background: #e8edff; color: #5364e7; font-weight: 750; }
.course-chapter-tree .course-chapter-root.active > span { color: #5364e7; transform: rotate(90deg); }
.course-tree-expanded { display: grid; gap: 2px; padding: 5px 0 8px 18px; }
.course-tree-section-row { min-height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 9px; color: #30364a; font-size: 12px; }
.course-tree-section-row > span { transform: rotate(90deg); }
.course-tree-section-row strong { font-weight: 700; }
.course-tree-groups { display: grid; gap: 1px; padding-left: 16px; }
.course-chapter-tree .course-tree-group { min-height: 34px; padding-left: 9px; color: #343a4d; font-size: 11px; font-weight: 600; }
.course-chapter-tree .course-tree-group.active { color: #30364d; }
.course-chapter-tree .course-tree-group.active > span { transform: rotate(90deg); }
.course-tree-leaf { min-height: 32px; display: flex; align-items: center; padding: 0 10px 0 30px; color: #3e4559; font-size: 11px; font-weight: 600; }
.course-catalog-content { min-height: 0; overflow: auto; padding: 22px 20px 30px; background: #fff; scroll-behavior: smooth; }
.course-catalog-section { scroll-margin-top: 20px; }
.course-catalog-section + .course-catalog-section { margin-top: 22px; }
.course-catalog-section h3 { margin: 0 0 12px; color: #3b4258; font-size: 14px; font-weight: 750; }
.course-catalog-rows { display: grid; gap: 8px; }
.course-catalog-item { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border: 1px solid transparent; border-radius: 11px; background: #f3f5fd; }
.course-catalog-item.selected { border-color: #c9d1ff; background: #edf0ff; }
.course-resource-row-main { min-width: 0; display: flex; align-items: center; gap: 9px; color: #4f566f; }
.course-resource-kind-icon { width: 18px; height: 18px; display: grid; place-items: center; flex: 0 0 18px; color: #7f89aa; font-size: 11px; font-style: normal; }
.course-resource-kind-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.course-resource-kind-icon.lesson svg path { fill: currentColor; stroke: none; }
.course-resource-kind-icon.lesson { color: #6373c9; }
.course-resource-kind-icon.practice { color: #7b83a8; }
.course-resource-kind-icon.word-practice { border-radius: 5px; background: #e9edff; color: #5665d2; font-size: 9px; font-weight: 800; }
.course-resource-kind-icon.sentence-reading { border-radius: 5px; background: #fff0eb; color: #c5674f; font-size: 9px; font-weight: 800; }
.course-resource-row-title { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.course-resource-row-title strong { color: #4b5268; font-size: 12px; font-weight: 700; }
.course-resource-row-title small { overflow: hidden; color: #6f7891; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.course-resource-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.course-catalog-item .course-preview-button { min-width: 88px; height: 34px; border: 1px solid #e1e5ef; border-radius: 999px; background: #fff; color: #50586f; font-size: 11px; }
.course-catalog-item .course-preview-button:hover { border-color: #c9d0e2; color: #3f475f; }
.course-join-button { min-width: 94px; height: 34px; padding: 0 16px; border: 1px solid #8399ff; border-radius: 999px; background: #fff; color: #566cf3; font-size: 11px; }
.course-join-button:hover { background: #f4f6ff; }
.course-join-button.selected { background: #6674e8; color: #fff; }
.course-join-button:disabled { border-color: #dce1ef; background: #f3f5f9; color: #98a0b5; }
.course-catalog-empty { min-height: 280px; display: grid; place-items: center; align-content: center; gap: 5px; color: #8a91a8; text-align: center; }
.course-catalog-empty strong { color: #515970; }
.course-catalog-empty p { margin: 0; font-size: 11px; }
.course-modal-foot { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex: 0 0 auto; padding: 9px 20px; background: #fff; }
.course-picker-modal > .course-modal-foot { min-height: 72px; padding: 0 22px; }
.course-modal-foot > div:last-child { display: flex; gap: 9px; }
.course-modal-foot > div:first-child { display: flex; align-items: center; gap: 7px; color: #4f576d; font-size: 12px; font-weight: 650; }
.course-modal-foot > div:first-child strong { color: #5265f2; }
.course-modal-foot .btn { min-width: 78px; min-height: 36px; border-radius: 999px; }
.course-modal-foot .btn.primary { min-width: 98px; }
.course-preview-modal, .course-update-modal { width: min(560px, 100%); overflow: hidden; border-radius: 18px; background: #fff; }
.report-rules-modal { width: min(640px, 100%); overflow: hidden; border-radius: 18px; }
.report-rules-modal .course-modal-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.report-rules-list { display: grid; gap: 10px; padding: 18px 20px; background: #f8faff; }
.report-rules-list article { padding: 13px 15px; border: 1px solid #e6eaf5; border-radius: 12px; background: #fff; }
.report-rules-list strong { color: #30364a; font-size: 13px; }
.report-rules-list p { margin: 6px 0 0; color: #697188; font-size: 12px; line-height: 1.7; }
.report-rules-modal .course-modal-foot { justify-content: flex-end; border-top: 1px solid #eceff6; }
.course-preview-canvas { min-height: 300px; display: grid; place-items: center; align-content: center; margin: 20px; border: 1px dashed #ccd3e8; border-radius: 13px; background: linear-gradient(145deg, #f4f7fe, #fff); color: #646b8a; text-align: center; }
.course-preview-canvas > span { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 50%; background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(101,116,252,.25); }
.course-preview-canvas p { margin: 6px 0 0; font-size: 11px; }
.english-resource-preview-modal { width: min(680px, 100%); }
.english-resource-preview { display: grid; gap: 14px; padding: 20px; background: #f8f9fc; color: #25293a; }
.english-preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.english-preview-stats > div { display: grid; gap: 4px; min-height: 70px; align-content: center; padding: 0 16px; border: 1px solid #e6e8f0; border-radius: 12px; background: #fff; }
.english-preview-stats small { color: #8a90a6; font-size: 11px; }
.english-preview-stats strong { font-size: 18px; color: #2f3549; }
.english-resource-preview > section:not(.english-preview-rule) { padding: 18px; border: 1px solid #e4e7f0; border-radius: 14px; background: #fff; }
.english-preview-section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.english-preview-kicker { display: block; margin-bottom: 4px; color: #7c849f; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.english-preview-section-head h3 { margin: 0; font-size: 15px; }
.english-preview-status { padding: 5px 9px; border-radius: 999px; background: #fff5e8; color: #b66c18; font-size: 10px; font-weight: 700; }
.english-preview-chip-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.english-preview-chip-list span { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 10px; background: #f5f7fb; color: #535a72; font-size: 12px; font-weight: 700; }
.english-preview-chip-list i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 7px; background: #6674e8; color: #fff; font-size: 10px; font-style: normal; }
.english-preview-rule { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border: 1px solid #dfeee4; border-radius: 12px; background: #f4faf6; }
.english-preview-rule > span { width: 22px; height: 22px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #4eaa6b; color: #fff; font-size: 11px; }
.english-preview-rule strong { display: block; margin-bottom: 3px; font-size: 12px; }
.english-preview-rule p { margin: 0; color: #687168; font-size: 11px; line-height: 1.6; }
.english-preview-footnote { margin: 0 2px; color: #858ba0; font-size: 10px; line-height: 1.6; }
.english-preview-mode-list { display: flex; gap: 8px; margin-bottom: 18px; }
.english-preview-mode-list span { min-width: 64px; padding: 7px 12px; border: 1px solid #e1e4ee; border-radius: 999px; color: #777e95; text-align: center; font-size: 11px; font-weight: 700; }
.english-preview-mode-list span.active { border-color: #ffcfc1; background: #fff3ef; color: #cf6548; }
.english-preview-score-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; }
.english-preview-score-list div { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 10px; color: #5f667d; font-size: 11px; }
.english-preview-score-list i { height: 7px; overflow: hidden; border-radius: 999px; background: #eef0f5; }
.english-preview-score-list b { display: block; height: 100%; border-radius: inherit; background: #e87c60; }
@media (max-width: 680px) {
  .english-preview-stats, .english-preview-score-list { grid-template-columns: 1fr; }
  .english-preview-chip-list { grid-template-columns: repeat(2, 1fr); }
}
.course-update-options { display: grid; gap: 10px; padding: 20px; }
.course-update-options label { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; }
.course-update-options input { margin-top: 3px; accent-color: var(--primary); }
.course-update-options strong, .course-update-options small { display: block; }
.course-update-options small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.diagnosis-report-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 24px; }
.diagnosis-report-preview > div { padding: 18px; border-radius: 12px; background: #f4f7fe; text-align: center; }
.diagnosis-report-preview small, .diagnosis-report-preview strong { display: block; }
.diagnosis-report-preview small { color: var(--muted); }
.diagnosis-report-preview strong { margin-top: 7px; color: var(--primary-dark); font-size: 24px; }
.smart-pick-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid #dce3f5; border-radius: 11px; background: #fff; }
.smart-pick-card strong, .smart-pick-card p { display: block; }
.smart-pick-card strong { font-size: 13px; }
.smart-pick-card p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.smart-config-card { display: grid; gap: 10px; margin-top: 12px; padding: 13px; border: 1px solid #dce3f5; border-radius: 11px; background: #fff; }
.config-line { display: grid; gap: 3px; padding-bottom: 9px; border-bottom: 1px solid #edf0f6; }
.config-line span { color: var(--muted); font-size: 10px; }
.config-line strong { font-size: 12px; }
.smart-config-card > p { margin: -2px 0 0; color: var(--muted); text-align: center; font-size: 10px; }
.manual-filter-row { display: flex; gap: 5px; margin-top: 10px; }
.manual-filter-row button { min-height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font-size: 10px; }
.manual-filter-row button.active { border-color: #bac4f8; background: var(--primary-weak); color: var(--primary-dark); }
.question-source-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; padding: 11px; border: 1px solid #e3e7f3; border-radius: 10px; background: #fff; cursor: pointer; }
.question-source-item input { margin-top: 3px; accent-color: var(--primary); }
.question-source-item strong, .question-source-item small { display: block; }
.question-source-item strong { font-size: 12px; line-height: 1.45; }
.question-source-item small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.locked-source-state { min-height: 360px; display: grid; place-items: center; align-content: center; padding: 24px; text-align: center; }
.locked-source-state > span { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 11px; border-radius: 50%; background: #e7ebf7; color: #77819c; font-size: 12px; font-weight: 700; }
.locked-source-state strong { font-size: 14px; }
.locked-source-state p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }

.homework-overview { display: flex; align-items: center; gap: 13px; margin-bottom: 15px; padding: 14px; border-radius: 12px; background: #f3f0ff; }
.homework-sheet-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 11px; background: #fff; color: #755ce0; font-weight: 800; }
.homework-overview strong { font-size: 15px; }
.homework-overview p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.question-preview-list { display: grid; gap: 8px; }
.question-preview { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; }
.question-preview > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #f1f3f9; color: var(--muted); font-size: 11px; }
.question-preview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.question-preview small { color: var(--muted); font-size: 11px; }

.publish-at.is-hidden { display: none; }
.publish-modal-backdrop { padding: 24px; }
.task-publish-modal { width: min(680px, 100%); overflow: hidden; border-radius: 20px; }
.task-publish-head { min-height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.task-publish-head h2 { margin: 0; font-size: 21px; }
.task-publish-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.task-publish-body { padding: 22px 24px 24px; }
.task-publish-context { display: grid; grid-template-columns: 1fr 1.35fr; gap: 10px; padding: 15px; border-radius: 12px; background: #f3f5ff; }
.task-publish-context > div { min-width: 0; }
.task-publish-context small, .task-publish-context strong, .task-publish-context span { display: block; }
.task-publish-context small { color: #8790ab; font-size: 10px; }
.task-publish-context strong { margin-top: 4px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.task-publish-context span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.task-publish-fields { display: grid; gap: 16px; margin-top: 20px; }
.task-publish-fields label { display: grid; gap: 7px; }
.task-publish-fields label > span { color: #727c9b; font-size: 12px; font-weight: 600; }
.task-publish-fields .field-help { color: #949bb0; font-size: 10px; font-weight: 500; }
.publish-time-grid { display: grid; grid-template-columns: 150px minmax(190px, 1fr) minmax(190px, 1fr); gap: 11px; align-items: end; }
.publish-time-grid .publish-at.is-hidden + label { grid-column: 2 / -1; }
.task-publish-foot { min-height: 76px; display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); }
.course-publish-modal { width: min(620px, 100%); border-radius: 16px; }
.course-publish-modal .task-publish-head { min-height: 68px; padding: 16px 22px; }
.course-publish-modal .task-publish-head h2 { font-size: 19px; }
.course-publish-modal .drawer-close { background: transparent; }
.course-publish-modal .drawer-close:hover { background: #f3f5f9; }
.course-publish-modal .task-publish-body { padding: 20px 22px 22px; }
.course-publish-summary { display: grid; gap: 3px; padding: 12px 14px; border-radius: 10px; background: #f7f8fc; }
.course-publish-summary strong,
.course-publish-summary span,
.course-publish-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-publish-summary strong { color: #252b3d; font-size: 13px; }
.course-publish-summary .course-publish-students { color: #535e7b; font-size: 11px; }
.course-publish-summary .course-publish-task-name { color: #68728f; font-size: 12px; font-weight: 600; }
.course-publish-summary small { color: #949bb0; font-size: 10px; }
.course-publish-modal .task-publish-fields { margin-top: 14px; }
.course-publish-time-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: start; }
.course-publish-time-grid.scheduled { grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.course-publish-modal .task-publish-foot { min-height: 68px; padding: 12px 22px; }
.course-publish-modal .task-publish-foot .btn { min-width: 88px; }
.deadline-quick-modal { width: min(580px, 100%); border-radius: 16px; }
.deadline-quick-modal .task-publish-head { min-height: 68px; padding: 16px 22px; }
.deadline-quick-modal .task-publish-head h2 { font-size: 19px; }
.deadline-quick-modal .task-publish-body { padding: 20px 22px 22px; }
.deadline-quick-modal .task-publish-fields { margin-top: 18px; }
.deadline-quick-time-fields { gap: 12px; }
.deadline-quick-modal .task-publish-foot { min-height: 68px; padding: 12px 22px; }
.deadline-quick-notice { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 9px 11px; border: 1px solid #f3dfad; border-radius: 9px; background: #fff9e9; color: #795b25; font-size: 11px; font-weight: 600; line-height: 1.5; }
.deadline-quick-notice svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: #d49a2c; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.deadline-quick-summary { overflow: hidden; border: 1px solid #eaedf4; border-radius: 12px; background: #f8f9fc; }
.deadline-quick-summary-main { min-width: 0; padding: 15px 17px 13px; }
.deadline-quick-task-name,
.deadline-quick-target { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deadline-quick-task-name { color: #283047; font-size: 15px; line-height: 1.45; }
.deadline-quick-target { margin-top: 5px; color: #7d87a2; font-size: 11px; font-weight: 550; }
.deadline-quick-publish-row { display: grid; gap: 7px; padding: 0 1px; }
.deadline-quick-publish-row span { color: #727c9b; font-size: 12px; font-weight: 600; }
.deadline-quick-publish-row strong { color: #3f475d; font-size: 13px; font-weight: 650; }
.publish-confirm-summary { display: grid; gap: 16px; }
.publish-confirm-hero { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; border-radius: 12px; background: #f2f5ff; }
.publish-confirm-hero > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #fff; color: var(--primary); font-weight: 800; box-shadow: 0 3px 10px rgba(64, 76, 132, .07); }
.publish-confirm-hero small, .publish-confirm-hero strong, .publish-confirm-hero p { display: block; margin: 0; }
.publish-confirm-hero small { color: #8992aa; font-size: 9px; }
.publish-confirm-hero strong { margin-top: 3px; color: #363e58; font-size: 14px; }
.publish-confirm-hero p { margin-top: 3px; color: var(--muted); font-size: 10px; }
.publish-confirm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0; border: 1px solid #e5e9f2; border-radius: 12px; background: #e5e9f2; }
.publish-confirm-grid > div { min-width: 0; padding: 12px 14px; background: #fff; }
.publish-confirm-grid dt { color: #8a93aa; font-size: 9px; }
.publish-confirm-grid dd { margin: 4px 0 0; overflow: hidden; color: #414960; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.publish-confirm-grid .deadline { background: #fbfaff; }
.publish-confirm-grid .deadline dd { color: var(--primary-dark); }
.publish-confirm-grid .content { grid-column: 1 / -1; }
.course-timing-field.has-error .control { border-color: #e4868c; box-shadow: 0 0 0 3px rgba(214, 79, 89, .07); }
.compose-footer { position: fixed; z-index: 25; right: 0; bottom: 0; left: var(--sidebar-width); min-height: 62px; display: flex; align-items: center; justify-content: flex-end; gap: 18px; padding: 10px 32px; border-top: 1px solid rgba(214,222,240,.82); background: rgba(243,247,255,.94); box-shadow: none; backdrop-filter: blur(12px); }
.create-route .compose-footer { left: 0; }
.compose-footer-actions { display: flex; gap: 9px; }
.compose-footer .btn { min-height: 36px; }
.compose-footer .btn.wide { min-width: 120px; }

.detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 13px; }
.detail-heading { display: flex; align-items: flex-start; gap: 13px; }
.detail-title-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-title-line h1 { margin: 0; font-size: 21px; }
.student-report-chip { min-height: 22px; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 999px; background: #eef1ff; color: var(--primary-dark); font-size: 10px; font-weight: 650; }
.detail-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.report-rules-button { flex: 0 0 auto; }
.detail-tabs { min-height: 48px; display: flex; align-items: stretch; gap: 26px; margin-bottom: 16px; padding: 0 10px; border-bottom: 1px solid var(--line-strong); }
.detail-tab { position: relative; padding: 0 2px; border: 0; background: transparent; color: #8b94ae; font-weight: 650; }
.detail-tab.active { color: var(--primary); }
.detail-tab.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.info-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.info-item { padding: 13px; border-radius: 10px; background: var(--surface-soft); }
.info-item small, .info-item strong { display: block; }
.info-item small { color: var(--muted); font-size: 11px; }
.info-item strong { margin-top: 4px; font-size: 13px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 11px; }
.section-title.compact { margin: 0 0 14px; }
.section-title h2 { margin: 0; font-size: 15px; }
.section-title p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.class-report-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 18px; align-items: start; }
.class-report-main { min-width: 0; display: grid; gap: 16px; }
.class-data-panel { padding: 20px; }
.class-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.class-section-head span, .class-section-head h2, .class-section-head p { display: block; }
.class-section-head span { margin-bottom: 3px; color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.class-section-head h2 { margin: 0; color: #303850; font-size: 16px; }
.class-section-head p { margin: 3px 0 0; color: #8a94ad; font-size: 10px; }
.class-section-head > strong { min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 8px; background: #f1f4fc; color: #69738d; font-size: 10px; font-weight: 600; white-space: nowrap; }
.class-reading-score-ring { position: relative; width: 96px; height: 96px; display: grid; place-items: center; margin-top: 12px; border-radius: 50%; background: conic-gradient(#6574e7 calc(var(--progress, 0) * 1%), #e4e7f5 0); }
.class-reading-score-ring::before { position: absolute; inset: 9px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(72,83,143,.08); content: ""; }
.class-reading-score-ring strong { position: relative; z-index: 1; color: #4f5dca; font-size: 24px; line-height: 1; }
.class-reading-score-ring strong small { margin-left: 1px; font-size: 10px; }
.class-report-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.class-report-summary.english { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.class-report-summary.stateful { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.class-report-summary > div { position: relative; min-width: 0; min-height: 106px; overflow: hidden; padding: 15px 16px 13px; border: 1px solid #e6ebf4; border-radius: 12px; background: linear-gradient(180deg, #edf8ff 0, #fff 58%); }
.class-report-summary > div.incomplete { background: linear-gradient(180deg, #f2f2ff 0, #fff 58%); }
.class-report-summary > div.accuracy { background: linear-gradient(180deg, #f0faee 0, #fff 58%); }
.class-report-summary > div.wrong { background: linear-gradient(180deg, #fff2ef 0, #fff 58%); }
.class-report-summary > div.reading { background: linear-gradient(180deg, #fff6eb 0, #fff 58%); }
.class-report-summary > div::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: #4ba2eb; }
.class-report-summary > div.incomplete::before { background: #747bea; }
.class-report-summary > div.accuracy::before { background: #45b664; }
.class-report-summary > div.wrong::before { background: #df6864; }
.class-report-summary > div.reading::before { background: #e8a64b; }
.class-report-summary span, .class-report-summary strong, .class-report-summary em { display: block; }
.class-report-summary span { color: #6f7a96; font-size: 10px; font-weight: 600; }
.class-report-summary strong { margin-top: 7px; color: #3196ed; font-size: 25px; line-height: 1.05; }
.class-report-summary strong small { display: inline; margin-left: 2px; font-size: 12px; }
.class-report-summary .incomplete strong { color: #6672e9; }
.class-report-summary .accuracy strong { color: #38b657; }
.class-report-summary .wrong strong { color: #e3625f; }
.class-report-summary .reading strong { color: #dd941f; }
.class-report-summary em { margin-top: 9px; overflow: hidden; color: #8a94ad; font-size: 9px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.class-report-guidance { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; align-items: center; margin-top: 12px; padding: 11px 13px; border: 1px solid #dde7f8; border-radius: 10px; background: #f7faff; }
.class-report-guidance.word { border-color: #dcebdd; background: #f6fbf7; }
.class-report-guidance.reading { border-color: #f0ded7; background: #fff8f5; }
.class-report-guidance.challenge { border-color: #eadfbf; background: #fffbef; }
.class-report-guidance.challenge > span { color: #a66c14; }
.class-report-guidance > span { grid-row: 1 / 3; padding: 5px 7px; border-radius: 7px; background: #fff; color: #6875dd; font-size: 9px; font-weight: 750; }
.class-report-guidance > strong { color: #3c455d; font-size: 11px; }
.class-report-guidance > p { margin: 0; color: #8790a7; font-size: 9px; }
.class-learning-analysis { padding: 20px; }
.class-analysis-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.class-analysis-head span { display: block; margin-bottom: 3px; color: var(--primary); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.class-analysis-head h2, .class-analysis-subtitle h3, .class-issue-title h3 { margin: 0; color: #303850; font-size: 15px; }
.class-analysis-head p, .class-analysis-subtitle p, .class-issue-title p { margin: 4px 0 0; color: #8a94ad; font-size: 10px; }
.class-analysis-head > strong { min-height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 8px; background: #fff3ef; color: #a15f4f; font-size: 9px; white-space: nowrap; }
.class-reading-analysis-layout { display: grid; grid-template-columns: minmax(142px, .62fr) minmax(290px, 1.38fr); gap: 14px; }
.class-reading-score-card { min-width: 0; display: grid; justify-items: center; align-content: center; padding: 14px; border: 1px solid #dfe3fb; border-radius: 13px; background: linear-gradient(155deg, #f3f5ff 0%, #fff 78%); text-align: center; }
.class-reading-score-card > span { color: #626d85; font-size: 10px; font-weight: 700; }
.class-reading-score-card > p { margin: 9px 0 0; color: #8a93a8; font-size: 8px; }
.class-reading-score-ring { width: 92px; height: 92px; margin-top: 10px; background: conic-gradient(#6574e7 calc(var(--score, 0) * 1%), #e4e7f5 0); }
.class-reading-score-ring strong { font-size: 22px; }
.class-dimension-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.class-dimension-grid article { min-width: 0; padding: 13px; border: 1px solid #e5eaf2; border-radius: 11px; background: #fbfcfe; }
.class-dimension-grid article > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.class-dimension-grid span { color: #717b94; font-size: 10px; }
.class-dimension-grid strong { color: #35405a; font-size: 16px; }
.class-dimension-grid i { height: 6px; display: block; overflow: hidden; margin-top: 10px; border-radius: 999px; background: #edf0f5; }
.class-dimension-grid b { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #56ba73, #83d294); }
.class-dimension-grid small { display: block; margin-top: 7px; color: #8b93a8; font-size: 8px; line-height: 1.45; }
.class-dimension-grid.personal { margin-top: 2px; }
.class-dimension-grid.reading { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.class-dimension-grid.reading article { min-height: 82px; padding: 12px 14px; border: 1px solid #e5e9f1; border-radius: 10px; background: #fafbfc; }
.class-dimension-grid.reading span { font-size: 11px; }
.class-dimension-grid.reading strong { font-size: 19px; }
.class-dimension-grid.reading i { height: 5px; margin-top: 11px; }
.class-dimension-grid.reading b { background: #6676df; }
.class-dimension-grid.reading small { margin-top: 8px; font-size: 9px; }
.class-analysis-subtitle { margin: 18px 0 10px; }
.class-issue-block { margin-top: 18px; }
.class-issue-title { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.class-issue-title > span { padding: 5px 8px; border-radius: 999px; background: #eef1ff; color: #5f6bd7; font-size: 9px; font-weight: 700; }
.class-issue-table { overflow: hidden; border: 1px solid #e5e8f0; border-radius: 11px; }
.class-issue-table-head, .class-issue-table > article { display: grid; grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(72px, .42fr)) minmax(140px, .8fr); gap: 12px; align-items: center; padding: 10px 13px; }
.class-issue-table-head { background: #f6f7fb; color: #858ca2; font-size: 9px; font-weight: 700; }
.class-issue-table-head span:not(:first-child), .class-issue-table > article > :not(:first-child) { text-align: center; }
.class-issue-table > article { min-height: 58px; border-top: 1px solid #edf0f5; color: #566078; font-size: 10px; }
.class-issue-table > article > div strong, .class-issue-table > article > div small { display: block; }
.class-issue-table > article > div strong { color: #374056; font-size: 11px; }
.class-issue-table > article > div small { margin-top: 3px; color: #9198aa; font-size: 8px; }
.class-issue-table > article b { color: #d46158; font-size: 11px; }
.class-issue-table > article em { color: #8b5f54; font-size: 9px; font-style: normal; }
.class-issue-table.reading .class-issue-table-head { font-size: 10px; }
.class-issue-table.reading > article { font-size: 11px; }
.class-issue-table.reading > article > div strong { font-size: 12px; }
.class-analysis-empty { padding: 28px 16px; border-top: 1px solid #edf0f5; color: #8a92a7; text-align: center; font-size: 10px; }
.class-student-report { overflow: hidden; }
.class-student-report-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 20px; }
.class-student-title-row { min-width: 0; }
.class-student-report-head h2 { margin: 0; color: #303850; font-size: 15px; white-space: nowrap; }
.class-student-title-row p { margin: 3px 0 0; color: #8a94ad; font-size: 10px; }
.class-student-tools { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.class-pending-filter { height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #dfe4ee; border-radius: 9px; background: #fff; color: #6f798e; font-size: 10px; font-weight: 650; white-space: nowrap; }
.class-pending-filter:hover { border-color: #c9d0e2; background: #f8f9fc; }
.class-pending-filter span { min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; border-radius: 999px; background: #eef0f5; color: #6f788a; font-size: 9px; }
.class-pending-filter.active { border-color: #bfc7f3; background: #f1f3ff; color: #5262ce; }
.class-pending-filter.active span { background: #dfe3ff; color: #4e5fc9; }
.class-ask-summary { min-width: 164px; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #e1e4f8; border-radius: 9px; background: #f7f8ff; white-space: nowrap; }
.class-ask-summary span { color: #8a93aa; font-size: 9px; }
.class-ask-summary strong { color: #5966dc; font-size: 11px; }
.class-ask-summary small { padding-left: 7px; border-left: 1px solid #dfe3f2; color: #9098aa; font-size: 9px; }
.class-student-search { width: 190px; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid #dfe4ef; border-radius: 9px; background: #f9faff; }
.class-student-search:focus-within { border-color: #aeb8ff; box-shadow: 0 0 0 3px rgba(91,104,246,.08); }
.class-student-search svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: #929bb2; stroke-width: 1.6; }
.class-student-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 11px; }
.class-student-table {
  --class-student-columns: minmax(150px, 1.05fr) minmax(190px, .9fr) minmax(76px, .38fr) minmax(104px, .5fr) minmax(82px, .4fr) 72px 86px;
  border-top: 1px solid var(--line);
}
.class-student-table-head, .class-student-row { display: grid; grid-template-columns: var(--class-student-columns); gap: 14px; align-items: center; padding-right: 18px; padding-left: 18px; }
.class-student-table.english-task { --class-student-columns: minmax(150px, 1fr) minmax(160px, .82fr) minmax(76px, .34fr) minmax(104px, .48fr) minmax(104px, .48fr) minmax(82px, .38fr) 72px 86px; }
.class-student-table.challenge { --class-student-columns: minmax(150px, 1fr) minmax(240px, 1.08fr) minmax(180px, .78fr) 86px; }
.class-student-table.reading { --class-student-columns: minmax(180px, .78fr) minmax(280px, 1.3fr) minmax(140px, .62fr) 86px 96px; }
.class-student-table-head { min-height: 40px; background: #f7f9fd; color: #8993ab; font-size: 9px; font-weight: 600; }
.class-student-table-head > :nth-child(3), .class-student-table-head > :nth-child(4), .class-student-table-head > :nth-child(5), .class-student-table-head > :nth-child(6) { text-align: center; }
.class-student-table-head > :last-child { padding-right: 7px; text-align: right; }
.class-student-table.challenge .class-student-table-head > :last-child { text-align: center; }
.class-student-table-head > :nth-child(n+3), .class-student-row > :nth-child(n+3) { min-height: 24px; display: flex; align-items: center; justify-content: center; border-left: 1px solid #edf0f6; }
.class-student-row { min-height: 60px; border-bottom: 1px solid #edf0f6; }
.class-student-row:last-child { border-bottom: 0; }
.class-student-row:hover { background: #f9faff; }
.class-student-number.reading-performance { color: #4f5871; }
.class-student-table.challenge.overview { --class-student-columns: minmax(170px, .82fr) minmax(250px, 1.18fr) repeat(var(--challenge-stage-count, 1), minmax(175px, 1fr)) minmax(108px, .46fr); }
.class-student-table.challenge.overview.single-stage { --class-student-columns: minmax(180px, .82fr) minmax(280px, 1.28fr) repeat(var(--challenge-stage-count, 1), minmax(220px, 1fr)); }
.class-challenge-matrix-stage { min-width: 0; display: grid; place-items: center; text-align: center; }
.class-challenge-matrix-stage > button { width: 100%; min-width: 0; display: grid; gap: 3px; padding: 5px 7px; border: 0; border-radius: 7px; background: transparent; color: #5d69c9; }
.class-challenge-matrix-stage > button:hover { background: #f4f6ff; }
.class-challenge-matrix-stage > button strong { overflow: hidden; color: #465069; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.class-challenge-matrix-stage > button span { font-size: 8px; font-weight: 700; }
.class-challenge-matrix-stage > span { width: 100%; display: grid; gap: 3px; place-items: center; }
.class-challenge-matrix-stage > span strong, .class-challenge-matrix-stage > span small { display: block; }
.class-challenge-matrix-stage > span strong { color: #727b8e; font-size: 9px; }
.class-challenge-matrix-stage > span small { max-width: 150px; margin-top: 2px; overflow: hidden; color: #a0a6b3; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.class-challenge-matrix-stage.progress > span strong { color: #b07921; }
.class-challenge-matrix-status { display: grid !important; gap: 3px; text-align: center; }
.class-challenge-matrix-status strong { font-size: 10px; }
.class-challenge-matrix-status small { color: #989fac; font-size: 8px; }
.class-challenge-matrix-status.success strong { color: #329653; }
.class-challenge-matrix-status.progress strong { color: #b07921; }
.class-challenge-matrix-status.neutral strong { color: #7f8798; }
.class-task-challenge-status { display: inline-flex; max-width: 100%; flex-direction: column; align-items: center; font-weight: 750; line-height: 1.25; text-align: center; }
.class-task-challenge-status strong { font-size: 10px; }
.class-task-challenge-status small { margin-top: 3px; color: #9aa1b1; font-size: 8px; font-weight: 500; white-space: nowrap; }
.class-task-challenge-status.success strong { color: #329653; }
.class-task-challenge-status.progress strong { color: #b07921; }
.class-task-challenge-status.neutral strong { color: #7f8798; }
.challenge-dictation-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #dcebdd; border-radius: 10px; background: #f6fbf7; }
.challenge-dictation-result span { color: #66736a; font-size: 9px; font-weight: 700; }
.challenge-dictation-result strong { grid-row: 1 / span 2; grid-column: 2; color: #329653; font-size: 18px; }
.challenge-dictation-result p { margin: 0; color: #849087; font-size: 9px; }
.class-sample-insufficient { min-height: 112px; display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 15px; align-items: center; padding: 18px; border: 1px dashed #dfe3eb; border-radius: 12px; background: #fafbfc; }
.class-sample-insufficient > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #f0f2f6; color: #7f889c; font-size: 22px; font-weight: 800; }
.class-sample-insufficient strong { color: #414a60; font-size: 13px; }
.class-sample-insufficient p { margin: 6px 0 0; color: #858da0; font-size: 9px; line-height: 1.65; }
.class-sample-insufficient.compact { min-height: 0; display: block; padding: 13px 15px; border-style: solid; background: #fafbfc; }
.class-sample-insufficient.compact strong { font-size: 11px; }
.class-sample-insufficient.compact p { margin-top: 4px; }
.class-sample-notice { margin: -2px 0 12px; padding: 8px 11px; border: 1px solid #eadfbf; border-radius: 8px; background: #fffbef; color: #8a6b33; font-size: 9px; }
.report-state-text { display: inline-flex; max-width: 100%; align-items: center; flex-direction: column; color: #687287; font-weight: 750; line-height: 1.25; text-align: center; }
.report-state-text small { display: block; max-width: 150px; margin-top: 3px; overflow: hidden; color: #9aa1b1; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.report-state-text.success { color: #329653; }
.report-state-text.progress { color: #b07921; }
.report-state-text.error { color: #cb5b58; }
.task-state-text { font-weight: 750; }
.task-state-text.completed { color: #329653; }
.task-state-text.inprogress { color: #b07921; }
.task-state-text.todo { color: #687287; }
.class-student-person { min-width: 0; display: flex; align-items: center; gap: 9px; }
.class-student-person > span { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: #e9edff; color: var(--primary-dark); font-size: 11px; font-weight: 700; }
.class-student-person strong, .class-student-person small { display: block; }
.class-student-person strong { color: #394158; font-size: 12px; }
.class-student-person small { width: fit-content; margin-top: 3px; padding: 1px 5px; border-radius: 4px; color: var(--muted); font-size: 8px; }
.class-student-person small.completed { background: var(--green-weak); color: var(--green); }
.class-student-person small.inprogress { background: var(--primary-weak); color: var(--primary-dark); }
.class-student-person small.todo { background: var(--amber-weak); color: var(--amber); }
.class-student-progress { max-width: 280px; display: flex; align-items: center; gap: 10px; }
.class-student-progress > span { width: 220px; height: 7px; min-width: 70px; max-width: 220px; flex: 0 1 220px; overflow: hidden; border-radius: 999px; background: #edf0f6; }
.class-student-progress i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #7883f4, #5b68e9); }
.class-student-progress strong { min-width: 34px; color: #555f7a; font-size: 11px; }
.class-student-number, .class-student-duration { color: #4f5871; font-size: 11px; font-weight: 600; text-align: center; }
.class-student-number.accuracy { color: #2d9f54; font-weight: 700; }
.class-student-number.mistakes { color: #59627a; }
.class-student-ask button { min-width: 46px; padding: 5px 7px; border: 1px solid #d8ddff; border-radius: 7px; background: #f3f4ff; color: #5966df; font-size: 10px; font-weight: 700; white-space: nowrap; }
.class-student-ask button:hover { border-color: #bfc6ff; background: #e9ebff; }
.class-student-ask button:disabled { border-color: transparent; background: transparent; color: #a5acbd; cursor: default; }
.class-student-action { justify-content: flex-end !important; text-align: right; }
.class-student-action button { display: inline-flex; align-items: center; gap: 3px; padding: 5px 7px; border: 0; border-radius: 7px; background: transparent; color: var(--primary); font-size: 10px; font-weight: 650; white-space: nowrap; }
.class-student-action button:hover { background: var(--primary-weak); }
.class-student-action button:disabled { background: transparent; color: #a2a9ba; cursor: default; }
.class-student-action button:disabled:hover { background: transparent; }
.class-student-action button span { font-size: 15px; font-weight: 400; line-height: 1; }
.class-student-search-empty { display: grid; place-items: center; gap: 4px; min-height: 150px; color: var(--muted); text-align: center; }
.class-student-search-empty strong { color: #515a73; font-size: 12px; }
.class-student-search-empty span { font-size: 10px; }

.course-report-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 15px; align-items: start; }
.task-structure { position: sticky; top: 20px; min-height: 0; padding: 17px; }
.structure-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.structure-head span { color: var(--muted); font-size: 11px; }
.structure-root { width: 100%; height: 42px; margin-top: 13px; padding: 0 12px; border: 0; border-radius: 9px; background: var(--primary-weak); color: var(--primary-dark); text-align: left; font-weight: 650; }
.structure-root:not(.active) { background: transparent; color: var(--text); }
.structure-children { position: relative; display: grid; gap: 3px; margin: 7px 0 0 11px; padding-left: 15px; border-left: 1px solid #ccd5eb; }
.task-structure.without-root .structure-children { margin-top: 14px; }
.structure-children button { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 10px 3px; border: 0; background: transparent; color: var(--text); text-align: left; }
.structure-children button.active { margin-left: -8px; padding-right: 8px; padding-left: 8px; border-radius: 9px; background: var(--primary-weak); color: var(--primary-dark); }
.structure-children button > span:first-child { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #edf1fa; color: var(--muted); font-size: 10px; }
.structure-children strong, .structure-children small { display: block; }
.structure-children strong { font-size: 11px; }
.structure-children small { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.course-report-main { display: grid; gap: 15px; }
.report-section { padding: 20px; }
.report-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.report-metrics.student-report-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.report-metric { min-height: 112px; padding: 17px; border-radius: 12px; }
.report-metric.blue { background: #e7f6ff; }
.report-metric.purple { background: #eef0ff; }
.report-metric.green { background: #effaec; }
.report-metric.amber { background: #fff7e8; }
.report-metric span, .report-metric strong, .report-metric small { display: block; }
.report-metric span { color: #7b86a4; font-size: 11px; }
.report-metric strong { margin-top: 7px; font-size: 24px; line-height: 1.15; }
.report-metric.blue strong { color: #2692ef; }
.report-metric.purple strong { color: #5f69ee; }
.report-metric.green strong { color: #2eb64e; }
.report-metric.amber strong { color: #d78a20; }
.report-metric small { margin-top: 7px; color: #7e87a1; font-size: 10px; }
.ask-activity-panel { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; align-items: center; min-height: 92px; padding: 16px 18px; border-color: #dfe3ff; background: linear-gradient(110deg, #f8f9ff 0%, #fff 58%); }
.ask-activity-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: #e8ebff; color: #5865dc; font-size: 17px; font-weight: 800; box-shadow: inset 0 0 0 1px rgba(88,101,220,.08); }
.ask-activity-copy { min-width: 0; }
.ask-activity-copy > span { display: block; color: #7d87a3; font-size: 10px; font-weight: 650; letter-spacing: .05em; }
.ask-activity-copy > div { display: flex; align-items: baseline; gap: 10px; margin-top: 3px; }
.ask-activity-copy h2 { margin: 0; color: #343c55; font-size: 15px; }
.ask-activity-copy strong { color: #5663df; font-size: 13px; }
.ask-activity-copy p { margin: 4px 0 0; color: #8b93a9; font-size: 10px; }
.ask-activity-action { display: inline-flex; align-items: center; gap: 10px; padding: 9px 11px 9px 14px; border: 1px solid #d8ddff; border-radius: 9px; background: #fff; color: #5360dc; font-size: 11px; font-weight: 700; }
.ask-activity-action:hover { border-color: #b9c0ff; background: #f6f7ff; }
.ask-activity-action b { font-size: 18px; font-weight: 400; line-height: 1; }
.ask-activity-action:disabled { border-color: #e7e9ef; background: #fafbfc; color: #a6adbd; cursor: default; }
.ask-activity-panel.empty { border-color: #e7e9ef; background: #fbfcfe; }
.ask-activity-panel.empty .ask-activity-icon { background: #f0f2f6; color: #9ba3b5; }

.ask-drawer-backdrop { background: rgba(28, 33, 55, .32); backdrop-filter: blur(1px); }
.ask-drawer { width: min(680px, 100%); animation: ask-drawer-in .2s ease-out; }
.ask-drawer-head { padding: 20px 24px 18px; }
.ask-drawer-head > div > span { display: block; margin-bottom: 4px; color: #6270e6; font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.ask-drawer-head h2 { color: #30384f; font-size: 18px; }
.ask-drawer-head p { max-width: 550px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask-drawer-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 0 24px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.ask-drawer-summary > div { min-height: 68px; padding: 12px 14px; background: #f7f8fd; }
.ask-drawer-summary > div:first-child { border-radius: 10px 0 0 10px; }
.ask-drawer-summary > div:last-child { border-radius: 0 10px 10px 0; }
.ask-drawer-summary span, .ask-drawer-summary strong { display: block; }
.ask-drawer-summary span { color: #8c95aa; font-size: 10px; }
.ask-drawer-summary strong { margin-top: 5px; color: #4e5cdf; font-size: 19px; }
.ask-drawer-summary strong small { font-size: 10px; font-weight: 600; }
.ask-drawer-summary strong.subject { color: #3f475e; font-size: 14px; }
.ask-drawer-body { padding: 18px 24px 28px; background: #f6f7fb; }
.ask-drawer-body-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.ask-drawer-body-head strong, .ask-drawer-body-head span { display: block; }
.ask-drawer-body-head strong { color: #3b435b; font-size: 13px; }
.ask-drawer-body-head span { margin-top: 3px; color: #8b93a8; font-size: 9px; }
.ask-session { overflow: hidden; margin-top: 12px; border: 1px solid #e1e5ef; border-radius: 13px; background: #fff; box-shadow: 0 5px 18px rgba(41,48,78,.04); }
.ask-session-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 16px; border-bottom: 1px solid #edf0f5; background: #fbfcff; }
.ask-session-head span { color: #6874df; font-size: 9px; font-weight: 750; letter-spacing: .05em; }
.ask-session-head h3 { margin: 3px 0 0; color: #384057; font-size: 13px; }
.ask-session-head p { margin: 4px 0 0; color: #929aab; font-size: 9px; }
.ask-session-head > strong { padding: 4px 8px; border-radius: 999px; background: #eef0ff; color: #5e69dc; font-size: 9px; white-space: nowrap; }
.ask-turn-list { padding: 3px 16px 15px; }
.ask-turn { padding-top: 10px; }
.ask-turn-divider { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #a0a7b7; font-size: 8px; }
.ask-turn-divider::before, .ask-turn-divider::after { height: 1px; flex: 1; background: #eff1f5; content: ""; }
.ask-message { display: flex; align-items: flex-start; gap: 9px; margin-top: 9px; }
.ask-message.student { flex-direction: row-reverse; }
.ask-message > div { max-width: 84%; }
.ask-avatar { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #e8ebff; color: #5865dc; font-size: 10px; font-weight: 750; }
.ask-message.assistant .ask-avatar { background: #eaf7ee; color: #279650; }
.ask-message p { margin: 0; padding: 10px 12px; border-radius: 11px 11px 11px 3px; background: #f3f5f9; color: #424a61; font-size: 11px; line-height: 1.65; }
.ask-message.student p { border-radius: 11px 11px 3px 11px; background: #eef0ff; color: #39449b; }
.ask-message small { display: block; margin-top: 4px; color: #a0a7b7; font-size: 8px; }
.ask-message.student small { text-align: right; }
.ask-message em { display: block; width: fit-content; margin-top: 5px; padding: 3px 7px; border-radius: 5px; background: #f0f8f2; color: #568267; font-size: 8px; font-style: normal; }
.ask-drawer-empty { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 7px; color: #98a0b3; text-align: center; }
.ask-drawer-empty > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: #e9ecf8; color: #6873d8; font-weight: 800; }
.ask-drawer-empty strong { color: #555e74; font-size: 13px; }
.ask-drawer-empty p { margin: 0; font-size: 10px; }
@keyframes ask-drawer-in { from { transform: translateX(24px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.report-note { margin-top: 11px; padding: 10px 12px; border-radius: 9px; background: #f4f6ff; color: #626d91; font-size: 11px; }
.report-kicker { display: block; margin-bottom: 5px; color: var(--primary); font-size: 11px; font-weight: 650; }
.report-remind { min-width: 92px; }
.overview-actions { display: grid; grid-template-columns: 70px; align-items: center; }
.learning-record-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.learning-record-list > div { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-radius: 10px; background: #f7f9fd; }
.learning-record-list span { color: var(--muted); font-size: 11px; }
.learning-record-list strong { font-size: 12px; }
.report-no-record { margin-top: 14px; padding: 20px; border: 1px dashed #cfd6e7; border-radius: 11px; text-align: center; }
.report-no-record strong { font-size: 13px; }
.report-no-record p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.course-overview-list { display: grid; }
.course-overview-head { display: grid; grid-template-columns: minmax(270px, 1.55fr) minmax(135px, .7fr) minmax(84px, .4fr) minmax(84px, .4fr) 68px 150px; gap: 14px; align-items: center; padding: 0 4px 10px; }
.course-overview-head span { color: var(--muted); font-size: 11px; font-weight: 600; }
.course-overview-list article { display: grid; grid-template-columns: minmax(270px, 1.55fr) minmax(135px, .7fr) minmax(84px, .4fr) minmax(84px, .4fr) 68px 150px; gap: 14px; align-items: center; padding: 14px 4px; border-top: 1px solid var(--line); }
.overview-name { min-width: 0; display: flex; align-items: center; gap: 10px; }
.overview-name strong, .overview-name small { display: block; }
.overview-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.overview-name small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.progress-cell { display: flex; align-items: center; gap: 8px; }
.progress-cell > span { width: 95px; height: 7px; overflow: hidden; border-radius: 999px; background: #eef1f8; }
.progress-cell i { height: 100%; display: block; border-radius: inherit; background: var(--primary); }
.progress-cell strong { font-size: 12px; }
.course-overview-list article > div:not(.overview-name):not(.progress-cell) small, .course-overview-list article > div:not(.overview-name):not(.progress-cell) strong { display: block; }
.course-overview-list article > div:not(.overview-name):not(.progress-cell) small { color: var(--muted); font-size: 10px; }
.course-overview-list article > div:not(.overview-name):not(.progress-cell) strong { margin-top: 2px; font-size: 12px; }
.overview-ask small { display: block; }
.overview-ask button { min-width: 48px; margin-top: 3px; padding: 4px 7px; border: 1px solid #d8ddff; border-radius: 7px; background: #f2f4ff; color: #5966dc; font-size: 10px; font-weight: 700; white-space: nowrap; }
.overview-ask button:hover { border-color: #bfc6ff; background: #e9ebff; }
.overview-ask button:disabled { border-color: transparent; background: transparent; color: #a4abbb; cursor: default; }

.homework-metrics { max-width: 1080px; }
.homework-report-stack { display: grid; gap: 15px; }
.homework-insight-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 14px; }
.answer-distribution { display: grid; gap: 12px; padding: 15px; border-radius: 12px; background: #f8faff; }
.distribution-row { display: grid; grid-template-columns: 60px 50px minmax(0, 1fr); gap: 10px; align-items: center; }
.distribution-row span { color: var(--muted); font-size: 12px; }
.distribution-row strong { font-size: 12px; }
.distribution-row > i { height: 8px; overflow: hidden; border-radius: 999px; background: #e8ecf4; }
.distribution-row > i b { height: 100%; display: block; border-radius: inherit; background: #aab4cc; }
.distribution-row.correct > i b { background: #3fbd69; }
.distribution-row.wrong > i b { background: #e36b70; }
.distribution-row.pending > i b { background: #e8a84d; }
.attention-card { padding: 16px; border: 1px solid #e4e8f3; border-radius: 12px; background: #fff9ef; }
.attention-card > span { color: var(--amber); font-size: 11px; font-weight: 650; }
.attention-card > strong { display: block; margin-top: 7px; font-size: 14px; line-height: 1.55; }
.attention-card > p { margin: 7px 0 13px; color: var(--muted); font-size: 11px; }
.answer-cards { display: grid; gap: 8px; }
.answer-filter-bar { display: flex; gap: 8px; margin-bottom: 12px; }
.answer-filter-bar button { padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; color: #6f7892; font-size: 11px; }
.answer-filter-bar button.active { border-color: #aeb8ff; background: var(--primary-weak); color: var(--primary-dark); font-weight: 650; }
.answer-filter-bar span { margin-left: 4px; }
.answer-cards article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; }
.answer-no { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #f0f3f9; color: #68718b; font-weight: 650; }
.answer-cards strong { font-size: 13px; }
.answer-cards p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.answer-result { min-width: 58px; padding: 5px 8px; border-radius: 8px; background: #f0f2f7; color: var(--muted); text-align: center; font-size: 11px; }
.answer-result.correct { background: var(--green-weak); color: var(--green); }
.answer-result.wrong { background: var(--red-weak); color: var(--red); }
.answer-result.pending { background: var(--amber-weak); color: var(--amber); }
.answer-empty { padding: 34px 20px; border: 1px dashed #d7dcea; border-radius: 11px; text-align: center; }
.answer-empty strong { font-size: 13px; }
.answer-empty p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }

.english-detail-report { --english-coral: #e87559; --english-ink: #33384c; }
.english-report-session-badge { padding: 7px 11px; border-radius: 999px; background: #eef1ff; color: #5c68d6; font-size: 10px; font-weight: 750; }
.word-session-stack { display: grid; gap: 14px; }
.word-session-report { overflow: hidden; padding: 18px; border: 1px solid #e1e5ef; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(49,59,91,.04); }
.word-session-report.latest { border-color: #cbd3fb; box-shadow: 0 12px 28px rgba(85,101,196,.08); }
.report-metrics.student-report-metrics.word-report-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.word-report-metrics .report-metric-detail { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 7px; }
.word-report-metrics .report-metric-detail > small { margin: 0; }
.word-report-metric-trend { margin: 0 !important; font-size: 10px; font-weight: 750; white-space: nowrap; }
.word-report-metric-trend.positive { color: #20a34a; }
.word-report-metric-trend.negative { color: #dd565c; }
.word-report-metric-trend.neutral { color: #7e87a1; }
.word-session-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
.word-session-head span, .word-session-head h2, .word-session-head p { display: block; }
.word-session-head span { color: #6674e8; font-size: 9px; font-weight: 800; }
.word-session-head h2 { margin: 4px 0 0; color: #33394d; font-size: 16px; }
.word-session-head p { margin: 5px 0 0; color: #858ca0; font-size: 10px; line-height: 1.6; }
.word-session-head > strong { max-width: 360px; padding: 8px 10px; border-radius: 9px; background: #f2f4ff; color: #5c68d6; font-size: 10px; line-height: 1.5; }
.word-session-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #edf0f5; }
.word-report-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #edf0f5; }
.word-session-section h3 { margin: 0; color: #34394c; font-size: 14px; }
.word-report-section h3 { margin: 0; color: #34394c; font-size: 14px; }
.word-result-table { overflow: hidden; border: 1px solid #e5e8f0; border-radius: 12px; }
.word-result-head, .word-result-body article { display: grid; grid-template-columns: minmax(210px, 1.4fr) repeat(4, minmax(74px, .45fr)) minmax(90px, .55fr); gap: 10px; align-items: center; }
.word-result-head { padding: 10px 14px; background: #f6f7fb; color: #858ca2; font-size: 10px; font-weight: 700; }
.word-result-head span:not(:first-child), .word-result-body article > div:not(:first-child) { text-align: center; }
.word-result-body article { min-height: 66px; padding: 9px 14px; border-top: 1px solid #edf0f5; }
.word-result-body article:hover { background: #fafbfe; }
.word-result-name > span { display: flex; align-items: center; gap: 7px; }
.word-result-name strong, .word-result-name small { display: block; }
.word-result-name strong { color: #353a4f; font-size: 13px; }
.word-result-name small { margin-top: 3px; color: #8990a4; font-size: 10px; }
.word-source-audio { padding: 3px 6px; border: 0; border-radius: 999px; background: #eef1ff; color: #5f6bd7; font-size: 8px; font-weight: 750; }
.word-result-mark { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; }
.word-result-mark.correct { background: #e7f7ec; color: #35a85b; }
.word-result-mark.wrong { background: #ffeded; color: #d9575d; }
.word-result-mark.empty { background: #f0f2f6; color: #9aa1b2; }
.word-audio-score { min-height: 27px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 0; border-radius: 999px; font-size: 10px; font-weight: 700; }
.word-audio-score.correct { background: #edf7f0; color: #3d9a5a; }
.word-audio-score.wrong { background: #fff0ef; color: #d45958; }
.word-audio-score.recorded { background: #eef1ff; color: #5f6bd7; }
.word-audio-score.attention { background: #fff0ed; color: #cc604f; }
.word-audio-score span { font-size: 8px; }
.word-mastery { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.word-mastery.passed { background: #e8f7ec; color: #309953; }
.word-mastery.attention { background: #fff0ed; color: #cc604f; }
.word-result-body article.attention { background: #fffdfb; }
.sentence-overall-status { padding: 7px 10px; border-radius: 8px; font-size: 10px; font-weight: 800; }
.sentence-overall-status.empty { background: #f0f2f6; color: #8f96a9; }
.reading-report-gate { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px; border: 1px dashed #d8ddea; border-radius: 12px; background: #fafbfe; }
.reading-report-gate > span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: #eef1ff; color: #5c68d6; font-size: 17px; font-weight: 850; }
.reading-report-gate h2 { margin: 0; color: #373d52; font-size: 15px; }
.reading-report-gate p { margin: 5px 0 0; color: #868da1; font-size: 10px; line-height: 1.6; }
.personal-report-overview { padding: 22px 24px; }
.personal-report-status { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 28px; padding: 5px 11px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.personal-report-status.success { background: #eaf7ee; color: #329554; }
.personal-report-status.progress { background: #fff5e6; color: #ae7525; }
.personal-report-status.neutral { background: #f0f2f6; color: #747d90; }
.personal-report-status.error { background: #fff0ef; color: #c55753; }
.reading-current-score-note { margin-top: 12px; padding: 9px 12px; border-radius: 8px; background: #f5f7fc; color: #68738d; font-size: 10px; font-weight: 700; }
.challenge-overview-badges { display: flex; align-items: center; gap: 8px; }
.challenge-final-result { min-height: 28px; display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px; background: #edf8f0; color: #329554; font-size: 10px; font-weight: 800; white-space: nowrap; }
.challenge-single-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid #eceef3; }
.challenge-single-status > div { display: flex; align-items: center; gap: 9px; }
.challenge-single-status > div > span { color: #737d93; font-size: 10px; font-weight: 700; }
.personal-report-dimensions .sentence-dimension-grid { gap: 0; overflow: hidden; border: 1px solid #e5e8ef; border-radius: 12px; }
.personal-report-dimensions .sentence-dimension-grid > div { border: 0; border-left: 1px solid #eceef3; border-radius: 0; }
.personal-report-dimensions .sentence-dimension-grid > div:first-child { border-left: 0; }
.personal-report-dimensions .sentence-dimension-grid > div:hover { border-color: #eceef3; box-shadow: none; }
.personal-report-note { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; padding: 9px 12px; border-radius: 8px; background: #f5f6fa; color: #737b8e; }
.personal-report-note span { flex: 0 0 auto; color: #59647e; font-size: 9px; font-weight: 750; }
.personal-report-note p { margin: 0; font-size: 9px; line-height: 1.6; }
.sentence-mode-content-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 18px 0 10px; }
.sentence-mode-content-head strong, .sentence-mode-content-head span { display: block; }
.sentence-mode-content-head strong { font-size: 13px; }
.sentence-mode-content-head span { margin-top: 3px; color: #8b91a3; font-size: 9px; }
.sentence-mode-content-head > b { padding: 5px 8px; border-radius: 999px; background: #eef1ff; color: #5966cf; font-size: 9px; }
.sentence-dimension-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sentence-dimension-grid > div { display: grid; grid-template-columns: 1fr auto; gap: 9px 10px; align-items: baseline; padding: 13px 14px; border: 1px solid #e7e9f0; border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.sentence-dimension-grid > div:hover { border-color: #d7dbe6; box-shadow: 0 4px 12px rgba(60,66,86,.06); }
.sentence-dimension-grid .dimension-card-name { color: #7b8297; font-size: 11px; font-weight: 600; }
.sentence-dimension-grid .dimension-card-score { color: #35405a; font-size: 22px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sentence-dimension-grid .dimension-card-track { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: #eef0f4; }
.sentence-dimension-grid .dimension-card-track b { display: block; height: 100%; border-radius: inherit; background: #6676df; transition: width .3s ease; }
.sentence-dimension-grid .dimension-card-caption { grid-column: 1 / -1; color: #9096a8; font-size: 10px; }
.sentence-dimension-grid .dimension-card.empty .dimension-card-score { color: #b4b9c6; }
.sentence-dimension-grid .dimension-card.empty .dimension-card-track b { background: #c7cddd; }
.sentence-result-list {
  --sentence-result-columns: 30px minmax(0, 1fr) 64px 20px;
  display: grid;
  gap: 8px;
}
.sentence-result-list article { overflow: hidden; border: 1px solid #e5e8f0; border-radius: 11px; background: #fff; }
.sentence-result-list article.expanded { border-color: #f0c6bb; box-shadow: 0 7px 18px rgba(168,93,74,.08); }
.sentence-result-list article.attention { border-color: #f2d4cc; background: #fffaf8; }
.sentence-result-list article.unread { border-color: #eceef3; background: #f8f9fb; }
.sentence-result-summary { width: 100%; display: grid; grid-template-columns: var(--sentence-result-columns); gap: 11px; align-items: center; padding: 12px 13px; border: 0; background: #fff; color: #34394c; text-align: left; }
.sentence-result-summary.unread, .sentence-result-summary.pending-score { background: #f8f9fb; color: #969dab; cursor: default; }
.sentence-result-summary.unread .sentence-index, .sentence-result-summary.pending-score .sentence-index { background: #eceff4; color: #969dab; }
.sentence-score.pending { color: #9aa2b2; font-size: 10px; }
.sentence-result-summary > .sentence-index, .sentence-result-summary > .sentence-chevron { justify-self: center; }
.sentence-copy { min-width: 0; }
.sentence-index { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; background: #fff0ec; color: #ca674e; font-size: 11px; font-weight: 800; }
.sentence-copy strong, .sentence-copy small { display: block; }
.sentence-copy strong { font-size: 12px; }
.sentence-copy small { margin-top: 3px; color: #9197a8; font-size: 9px; }
.sentence-word-feedback { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; }
.word-feedback { padding: 2px 4px; border-radius: 4px; background: #f2f3f6; color: #34394c; font-size: 8px; }
.word-feedback.accurate { background: #e7f7ec; color: #319657; }
.word-feedback.needs-practice { background: #ffeded; color: #d15859; }
.word-feedback.neutral { background: #f2f3f6; color: #34394c; }
.sentence-score { text-align: right; font-size: 13px; }
.sentence-score.recorded { color: #5c68d6; }
.sentence-chevron { color: #9299aa; transition: transform .2s ease; }
.sentence-result-list article.expanded .sentence-chevron { transform: rotate(180deg); }
.sentence-result-detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px 14px 54px; border-top: 1px solid #f0e6e3; background: #fffaf8; }
.sentence-detail-scores { display: grid; grid-template-columns: repeat(4, minmax(70px, 1fr)); gap: 8px; }
.sentence-detail-scores div { padding: 8px 9px; border-radius: 8px; background: #fff; }
.sentence-detail-scores span, .sentence-detail-scores strong { display: block; }
.sentence-detail-scores span { color: #9297a7; font-size: 9px; }
.sentence-detail-scores strong { margin-top: 3px; color: #4b5062; font-size: 13px; }
.sentence-audio-button { min-height: 38px; display: grid; grid-template-columns: 24px auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 5px 11px; border: 1px solid #f0c7bc; border-radius: 9px; background: #fff; color: #c56049; text-align: left; }
.sentence-audio-button > span { grid-row: 1 / 3; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #e87559; color: #fff; font-size: 8px; }
.sentence-audio-button strong { font-size: 10px; }
.sentence-audio-button small { color: #a08e89; font-size: 8px; }
.sentence-audio-button:disabled, .sentence-audio-button.unavailable { cursor: not-allowed; border-color: #e1e4ea; background: #f7f8fa; color: #8d95a5; opacity: 1; }
.sentence-audio-button.unavailable > span { background: #d8dce4; color: #7f8796; }
.sentence-audio-button.unavailable small { color: #9ca3b0; }
.sentence-audio-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.report-status-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; overflow: hidden; margin-bottom: 14px; border: 1px solid #e4e8f1; border-radius: 11px; background: #e4e8f1; }
.report-status-strip > span { min-width: 0; padding: 11px 13px; background: #fbfcfe; }
.report-status-strip small, .report-status-strip strong { display: block; }
.report-status-strip small { color: #9299aa; font-size: 9px; }
.report-status-strip strong { margin-top: 4px; overflow: hidden; color: #41495e; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.report-status-strip strong.success { color: #2f9952; }
.report-status-strip strong.progress { color: #b17920; }
.report-status-strip strong.neutral { color: #747d90; }
.report-status-strip strong.error { color: #c95855; }
.sentence-overall-status.error { background: #fff0ef; color: #c55753; }

.challenge-detail-report {
  --challenge-gold: #c2831f;
  --challenge-green: #2f9b58;
  gap: 0;
  overflow: hidden;
  border: 1px solid #e2e6ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(48, 57, 82, .055);
}
.challenge-detail-report > .panel:not(.ask-activity-panel) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.challenge-detail-report > .ask-activity-panel { margin: 14px 22px; }
.challenge-report-overview { padding: 20px 22px 16px; }
.challenge-report-overview .section-title.compact { margin-bottom: 13px; }
.challenge-report-overview .section-title h2 { margin-top: 3px; font-size: 18px; letter-spacing: -.01em; }
.challenge-report-overview .section-title p { margin-top: 5px; font-size: 10px; line-height: 1.55; }
.challenge-stage-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0 22px; border-top: 1px solid #eceef3; border-bottom: 1px solid #eceef3; background: #fff; }
.challenge-stage-tabs button {
  position: relative;
  min-height: 54px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-content: center;
  padding: 7px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #5b6478;
  text-align: left;
  box-shadow: none;
}
.challenge-stage-tabs button + button { border-left: 1px solid #e7eaf1; }
.challenge-stage-tabs button > span { grid-row: 1 / 3; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #f0f2f6; color: #697287; font-size: 10px; font-weight: 850; }
.challenge-stage-tabs button strong { align-self: end; font-size: 12px; }
.challenge-stage-tabs button small { align-self: start; margin-top: 2px; color: #969cac; font-size: 8px; }
.challenge-stage-tabs button:hover { background: #fcfdff; }
.challenge-stage-tabs button.active { background: #fff; color: #424a5e; }
.challenge-stage-tabs button.active::after { position: absolute; right: 14px; bottom: -1px; left: 14px; height: 2px; border-radius: 999px 999px 0 0; background: var(--primary); content: ""; }
.challenge-stage-tabs button.active > span { background: #e9ecfb; color: #4f5cc6; }
.challenge-stage-tabs button.locked:not(.active) { background: #fafbfc; color: #9299a9; }
.challenge-stage-panel { overflow: hidden; padding: 22px; }
.challenge-result-hero { display: grid; grid-template-columns: minmax(180px, 1.05fr) repeat(2, minmax(150px, .75fr)); gap: 0; overflow: hidden; margin-bottom: 18px; padding: 0; border: 1px solid #e5e8ef; border-radius: 12px; background: #fff; }
.challenge-result-hero > div:not(.challenge-rule-note) { min-height: 78px; padding: 13px 15px; border: 0; border-left: 1px solid #eceef3; border-radius: 0; background: #fff; }
.challenge-result-hero > div:first-child { border-left: 0; }
.challenge-result-score { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.challenge-result-score > div { display: flex; align-items: flex-start; flex-direction: column; gap: 8px; }
.challenge-result-score span, .challenge-result-fact span { color: #717b94; font-size: 10px; font-weight: 600; letter-spacing: .02em; }
.challenge-result-score em { width: fit-content; padding: 4px 9px; border-radius: 999px; background: #e8f7ed; color: #2f9654; font-size: 10px; font-style: normal; font-weight: 800; }
.challenge-result-hero.failed .challenge-result-score em { background: #fff0ed; color: #c94a3d; }
.challenge-result-score > strong { color: #4f5dca; font-size: 32px; line-height: 1; font-variant-numeric: tabular-nums; }
.challenge-result-score > strong small { font-size: 10px; }
.challenge-result-fact { display: flex; justify-content: center; flex-direction: column; }
.challenge-result-fact strong { margin-top: 7px; color: #35405a; font-size: 18px; font-variant-numeric: tabular-nums; }
.challenge-rule-note { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; padding: 9px 12px; border-top: 1px solid #eceef3; background: #f7f8fa; color: #6f7790; font-size: 10px; line-height: 1.6; }
.challenge-failure-reasons { grid-column: 1 / -1; min-height: 0 !important; display: flex; align-items: flex-start; gap: 12px; padding: 10px 13px !important; border-top: 1px solid #f0d8d2 !important; border-left: 0 !important; background: #fff7f4 !important; }
.challenge-failure-reasons > strong { flex: 0 0 auto; color: #a9473e; font-size: 9px; }
.challenge-failure-reasons ul { display: flex; flex-wrap: wrap; gap: 5px 16px; margin: 0; padding: 0; list-style: none; }
.challenge-failure-reasons li { position: relative; padding-left: 10px; color: #b45449; font-size: 9px; }
.challenge-failure-reasons li::before { position: absolute; left: 0; content: "•"; }
.challenge-rule-note strong { flex: 0 0 auto; color: #59647e; font-size: 9px; font-weight: 800; }
.challenge-rule-note.failure { background: #fff5f2; color: #b2453c; }
.challenge-rule-note.failure strong { color: #a83b34; }
.challenge-speed-reading-head { margin-top: 18px; }
.challenge-speed-reading-list .sentence-index { background: #eef1ff; color: #5967c5; }
.challenge-word-table {
  --challenge-word-columns: 64px minmax(180px, 1.2fr) minmax(150px, .9fr) minmax(80px, .42fr) minmax(120px, .58fr);
  overflow: hidden;
  border: 1px solid #e1e5ee;
  border-radius: 12px;
  background: #fff;
}
.challenge-word-table header, .challenge-word-table article {
  display: grid;
  grid-template-columns: var(--challenge-word-columns);
  gap: 0;
  align-items: center;
  padding: 0 18px;
}
.challenge-word-table header > *, .challenge-word-table article > * { min-width: 0; padding-right: 12px; padding-left: 12px; }
.challenge-word-table header > :first-child, .challenge-word-table article > :first-child { padding-left: 0; }
.challenge-word-table header > :last-child, .challenge-word-table article > :last-child { padding-right: 0; }
.challenge-word-table header { min-height: 42px; background: #f7f8fb; color: #858da1; font-size: 9px; font-weight: 750; letter-spacing: .02em; }
.challenge-word-table header > span:first-child,
.challenge-word-table header > span:nth-child(n+3) { text-align: center; }
.challenge-word-table article { min-height: 64px; border-top: 1px solid #e9ecf2; color: #5d667a; font-size: 10px; transition: background-color .16s ease; }
.challenge-word-table article:hover { background: #fafbfe; }
.challenge-word-order { width: 28px; height: 28px; display: grid; place-items: center; justify-self: center; border-radius: 9px; background: #eef1ff; color: #5967c5; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; }
.challenge-word-name { min-width: 0; }
.challenge-word-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-word-name strong { color: #394156; font-size: 11px; }
.challenge-word-meaning, .challenge-word-pos { overflow: hidden; color: #70798e; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.challenge-word-attempt {
  min-width: 84px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 9px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.challenge-word-attempt { background: #f1f3f7; color: #4e586e; font-weight: 750; }
.challenge-word-table article.first-correct .challenge-word-attempt { background: #edf8f0; color: #2f9252; }
.challenge-dictation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; overflow: hidden; margin-bottom: 14px; border: 1px solid #e5e8ef; border-radius: 12px; background: #fff; }
.challenge-dictation-metrics .report-metric { min-height: 86px; padding: 14px 16px; border-left: 1px solid #eceef3; border-radius: 0; background: #fff; }
.challenge-dictation-metrics .report-metric:first-child { border-left: 0; }
.challenge-dictation-metrics .report-metric span { font-size: 9px; }
.challenge-dictation-metrics .report-metric strong { margin-top: 5px; font-size: 21px; }
.challenge-dictation-metrics .report-metric small { margin-top: 5px; font-size: 8px; }
.challenge-stage-gate { padding: 22px; border: 1px dashed #cbd3ea; border-radius: 13px; background: #fafbff; }
.challenge-stage-gate h3 { margin: 0; color: #42495d; font-size: 15px; }
.challenge-stage-gate p { margin: 6px 0 12px; color: #7f8799; font-size: 10px; line-height: 1.7; }
.challenge-stage-path { display: flex; gap: 8px; flex-wrap: wrap; }
.challenge-stage-path > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #e4e7ed; border-radius: 999px; background: #fff; color: #7d8596; font-size: 9px; font-weight: 700; }
.challenge-stage-path i { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #eff1f5; color: #8f96a5; font-size: 8px; font-style: normal; }
.challenge-stage-path > span.done { border-color: #cfe7d6; color: #358e53; }
.challenge-stage-path > span.done i { background: #e7f6eb; color: #329255; }
.challenge-stage-path > span.locked { background: #f7f8fa; color: #989fac; }
.personal-reading-total { color: #5663d3; font-size: 28px; }
.personal-reading-total small { margin-left: 2px; font-size: 10px; }

@media (max-width: 1350px) {
  .task-history-toolbar { flex-wrap: wrap; padding-bottom: 10px; }
  .history-controls { flex: 1 1 100%; margin-left: 0; }
  .header-search { flex: 0 1 250px; }
  .task-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1250px) {
  .compose-scope { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scope-title { grid-column: 1 / -1; }
}

@media (max-width: 1050px) {
  .task-start-zone { grid-template-columns: 1fr; gap: 12px; }
  .header-filter-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filter-select { width: 100%; min-width: 0; }
  .history-controls { display: grid; grid-template-columns: minmax(170px, .75fr) minmax(220px, 1fr) auto; }
  .history-controls .header-filter-group { grid-column: 1 / -1; }
  .history-controls .date-filter-wrap { width: 100%; grid-column: 1; }
  .history-controls .header-search { width: 100%; grid-column: 2; margin-left: 0; }
  .task-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compose-workspace { grid-template-columns: 1fr; }
  .source-panel { border-top: 1px solid var(--line); border-left: 0; }
  .course-report-layout, .class-report-layout { grid-template-columns: 1fr; }
  .task-structure { position: static; min-height: auto; }
  .structure-children { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-metrics.student-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-metrics.student-report-metrics.word-report-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .challenge-result-hero { grid-template-columns: minmax(180px, 1.05fr) repeat(2, minmax(150px, .75fr)); }
  .class-report-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-report-summary.english { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-report-summary.stateful { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-dimension-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-dimension-grid.reading { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .class-student-table { --class-student-columns: minmax(150px, 1fr) minmax(150px, .8fr) 80px 68px 76px; }
  .class-student-table-head > :nth-child(4), .class-student-row > :nth-child(4), .class-student-table-head > :nth-child(5), .class-student-row > :nth-child(5) { display: none; }
  .class-student-table.challenge { --class-student-columns: minmax(140px, 1fr) minmax(220px, 1.08fr) minmax(150px, .72fr) 82px; }
  .class-student-table.reading { --class-student-columns: minmax(140px, 1fr) minmax(220px, 1.08fr) minmax(150px, .72fr) 68px 82px; }
  .class-student-table.challenge .class-student-table-head > :nth-child(4), .class-student-table.challenge .class-student-row > :nth-child(4),
  .class-student-table.challenge .class-student-table-head > :nth-child(5), .class-student-table.challenge .class-student-row > :nth-child(5),
  .class-student-table.reading .class-student-table-head > :nth-child(4), .class-student-table.reading .class-student-row > :nth-child(4),
  .class-student-table.reading .class-student-table-head > :nth-child(5), .class-student-table.reading .class-student-row > :nth-child(5) { display: flex; }
  .class-student-table.english-task { --class-student-columns: minmax(140px, 1fr) minmax(150px, .8fr) 80px minmax(104px, .52fr) minmax(104px, .52fr) 82px; }
  .class-student-table.english-task .class-student-table-head > :nth-child(4), .class-student-table.english-task .class-student-row > :nth-child(4),
  .class-student-table.english-task .class-student-table-head > :nth-child(5), .class-student-table.english-task .class-student-row > :nth-child(5) { display: flex; }
  .class-student-table.english-task .class-student-table-head > :nth-child(6), .class-student-table.english-task .class-student-row > :nth-child(6),
  .class-student-table.english-task .class-student-table-head > :nth-child(7), .class-student-table.english-task .class-student-row > :nth-child(7) { display: none; }
  .class-student-table.challenge.overview { --class-student-columns: minmax(150px, .82fr) minmax(220px, 1.18fr) repeat(var(--challenge-stage-count, 1), minmax(155px, .82fr)) minmax(92px, .42fr); }
  .class-student-table.challenge.overview.single-stage { --class-student-columns: minmax(160px, .82fr) minmax(240px, 1.22fr) repeat(var(--challenge-stage-count, 1), minmax(190px, .9fr)); }
}

@media (max-width: 900px) {
  .compose-footer { left: 0; padding: 12px 16px; }
  .course-catalog-layout { grid-template-columns: 220px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .page-header, .detail-top, .compose-footer { align-items: flex-start; flex-direction: column; }
  .start-zone-actions { grid-template-columns: 1fr; }
  .header-search { width: 100%; flex-basis: auto; }
  .header-filter-group { width: 100%; grid-template-columns: 1fr 1fr; }
  .history-controls { grid-template-columns: 1fr auto; }
  .history-controls .date-filter-wrap { grid-column: 1 / -1; }
  .history-controls .header-search { grid-column: 1; }
  .date-picker-popover { width: min(620px, calc(100vw - 32px)); right: auto; left: 0; }
  .date-picker-calendars { grid-template-columns: 1fr; max-height: 480px; overflow: auto; }
  .calendar-month + .calendar-month { border-top: 1px solid #edf0f6; border-left: 0; }
  .task-cards { grid-template-columns: 1fr; }
  .compose-scope { grid-template-columns: 1fr; }
  .scope-student-dropdown { min-width: 100%; }
  .course-deadline-editor { grid-template-columns: 1fr; gap: 12px; }
  .content-selection-head .course-task-title h2 { max-width: 58vw; }
  .course-task-title.editing { width: min(100%, 76vw); }
  .scope-title { grid-column: auto; }
  .course-modal-backdrop { padding: 12px; }
  .course-picker-modal { width: 100%; height: calc(100vh - 24px); min-height: 0; }
  .course-catalog-layout { grid-template-columns: 1fr; }
  .course-catalog-sidebar { max-height: 230px; border-right: 0; border-bottom: 1px solid var(--line); }
  .course-chapter-tree { grid-template-columns: 1fr; }
  .course-catalog-item { align-items: flex-start; flex-direction: column; }
  .course-modal-foot { align-items: flex-start; flex-direction: column; }
  .course-modal-foot > div:last-child { width: 100%; justify-content: flex-end; }
  .publish-time-grid, .task-publish-context { grid-template-columns: 1fr; }
  .publish-time-grid .publish-at.is-hidden + label { grid-column: auto; }
  .selected-content-card { grid-template-columns: 28px 38px minmax(0, 1fr); }
  .selected-content-card .duration-pill, .selected-content-card .remove-action { grid-column: 3; justify-self: start; }
  .info-grid, .report-metrics, .report-metrics.student-report-metrics { grid-template-columns: 1fr; }
  .report-metrics.student-report-metrics.word-report-metrics { grid-template-columns: 1fr; }
  .homework-insight-grid { grid-template-columns: 1fr; }
  .course-overview-head { display: none; }
  .course-overview-list article { grid-template-columns: 40px minmax(0, 1fr); }
  .course-overview-list article > :nth-child(n+2) { grid-column: 2; }
  .learning-record-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .report-status-strip, .challenge-dictation-metrics { grid-template-columns: 1fr; }
  .challenge-dictation-metrics .report-metric { border-top: 1px solid #eceef3; border-left: 0; }
  .challenge-dictation-metrics .report-metric:first-child { border-top: 0; }
  .challenge-detail-report .challenge-stage-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 10px; }
  .challenge-stage-tabs button { padding-right: 8px; padding-left: 8px; }
  .challenge-stage-tabs button.active::after { right: 8px; left: 8px; }
  .challenge-report-overview, .challenge-stage-panel { padding: 16px; }
  .class-sample-insufficient { grid-template-columns: 1fr; text-align: center; }
  .class-sample-insufficient > span { justify-self: center; }
  .challenge-stage-gate { text-align: center; }
  .challenge-stage-path { justify-content: center; }
  .challenge-result-hero { grid-template-columns: 1fr; }
  .challenge-result-hero > div:not(.challenge-rule-note) { border-top: 1px solid #eceef3; border-left: 0; }
  .challenge-result-hero > div:first-child { border-top: 0; }
  .challenge-speed-reading-head { align-items: flex-start; flex-direction: column; }
  .challenge-word-table { overflow-x: auto; }
  .challenge-word-table header, .challenge-word-table article { min-width: 650px; }
  .word-result-table { overflow-x: auto; }
  .word-result-head, .word-result-body article { min-width: 760px; }
  .sentence-dimension-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sentence-result-detail { grid-template-columns: 1fr; padding-left: 14px; }
  .sentence-detail-scores { grid-template-columns: repeat(2, minmax(70px, 1fr)); }
  .class-student-report-head { align-items: flex-start; flex-direction: column; padding: 14px; }
  .class-student-title-row { width: 100%; align-items: flex-start; flex-direction: column; }
  .class-student-tools { width: 100%; align-items: stretch; flex-direction: column; }
  .class-ask-summary { width: fit-content; }
  .class-pending-filter { justify-content: center; }
  .class-student-search { width: 100%; }
  .class-report-summary { grid-template-columns: 1fr 1fr; }
  .class-report-summary.english { grid-template-columns: 1fr; }
  .class-report-summary.stateful { grid-template-columns: 1fr 1fr; }
  .class-reading-analysis-layout { grid-template-columns: 1fr; }
  .class-analysis-head { flex-direction: column; }
  .class-dimension-grid { grid-template-columns: 1fr 1fr; }
  .class-dimension-grid.reading { grid-template-columns: 1fr 1fr; }
  .class-issue-table { overflow-x: auto; }
  .class-issue-table-head, .class-issue-table > article { min-width: 720px; }
  .class-student-table-head { display: none; }
  .class-student-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; margin: 0 18px; padding: 14px 0; }
  .class-student-row > :nth-child(2), .class-student-row > :nth-child(3), .class-student-row > :nth-child(4), .class-student-row > :nth-child(5) { display: none; }
  .class-student-row .class-student-action { display: flex; }
  .class-student-row .class-student-ask { display: flex; grid-column: 2; border-left: 0 !important; }
  .class-student-action { grid-column: 3; border-left: 0 !important; text-align: right; }
  .class-student-table.challenge.overview { overflow-x: auto; }
  .class-student-table.challenge.overview {
    --class-student-columns: 120px 180px repeat(var(--challenge-stage-count, 1), 150px) 92px;
  }
  .class-student-table.challenge.overview.single-stage {
    --class-student-columns: 120px 180px repeat(var(--challenge-stage-count, 1), 150px);
  }
  .class-student-table.challenge.overview .class-student-table-head { min-width: var(--challenge-table-min-width); display: grid; grid-template-columns: var(--class-student-columns); }
  .class-student-table.challenge.overview .class-student-row { min-width: var(--challenge-table-min-width); display: grid; grid-template-columns: var(--class-student-columns); gap: 0; margin: 0; padding: 12px 18px; }
  .class-student-table.challenge.overview .class-student-row > :not(:first-child) { display: flex; }
  .class-student-table.reading { --class-student-columns: 140px 240px 150px 80px 90px; overflow-x: auto; }
  .class-student-table.reading .class-student-table-head,
  .class-student-table.reading .class-student-row { min-width: 760px; display: grid; grid-template-columns: var(--class-student-columns); gap: 0; margin: 0; }
  .class-student-table.reading .class-student-row { padding: 12px 18px; }
  .class-student-table.reading .class-student-row > :not(:first-child) { display: flex; }
  .ask-activity-panel { grid-template-columns: 42px minmax(0, 1fr); }
  .ask-activity-icon { width: 42px; height: 42px; }
  .ask-activity-action { grid-column: 2; justify-self: start; }
  .ask-drawer-summary { padding-right: 16px; padding-left: 16px; }
  .ask-drawer-body { padding: 16px; }
  .compose-footer { align-items: stretch; }
  .compose-footer-actions { justify-content: flex-end; }
}