.task-list-workspace { overflow: visible; }
.task-page-titlebar { min-height: 38px; margin-bottom: 12px; }
.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 .target-line { 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-result-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .9); }
.target-line { min-width: 0; display: flex; align-items: center; gap: 8px; }
.target-line strong { color: #3a425b; font-size: 13px; font-weight: 650; }
.target-line span { color: var(--muted); font-size: 11px; }
.target-line .target-kind { color: #8a94ad; font-size: 10px; }
.metric-row { display: flex; align-items: stretch; gap: 0; }
.metric-row > div { min-width: 72px; display: grid; align-content: end; gap: 2px; padding: 0 18px; }
.metric-row > div:first-child { padding-left: 0; }
.metric-row > div + div { border-left: 1px solid #e6eaf2; }
.metric-row small, .metric-row strong { display: block; }
.metric-row small { color: #7e89a8; font-size: 10px; }
.metric-row strong { color: #3b435b; font-size: 14px; font-weight: 650; line-height: 1.2; }
.card-view-button { width: 30px; min-height: 30px; display: inline-grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--card-accent); 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 span { font-size: 21px; 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: 40px; display: grid; grid-template-columns: 228px 164px; justify-content: start; gap: 12px; align-items: center; margin-bottom: 20px; padding: 0; }
.compose-scope > .control { height: 40px; border-color: #dbe2f0; border-radius: 9px; font-weight: 600; box-shadow: 0 1px 2px rgba(64, 76, 132, .025); }
.course-assignment-scope { display: grid; gap: 12px; margin-bottom: 18px; padding: 14px 16px 16px; border: 1px solid #e0e6f2; border-radius: 14px; background: rgba(255,255,255,.92); box-shadow: 0 7px 24px rgba(64,76,132,.04); }
.course-assignment-scope-head { min-height: 20px; display: flex; align-items: center; }
.course-assignment-scope-head > strong { color: #3e465f; font-size: 14px; }
.course-target-fields { display: grid; gap: 12px; align-items: end; }
.unified-target-fields { grid-template-columns: 240px 180px minmax(280px, 380px); justify-content: start; }
.course-target-fields label { display: grid; gap: 5px; }
.course-target-fields label > span { color: #7f89a3; font-size: 10px; font-weight: 600; }
.course-target-fields .control { height: 40px; border-color: #dbe2f0; border-radius: 9px; font-weight: 600; }
.course-target-field { display: grid; gap: 5px; }
.course-target-field > span { color: #7f89a3; font-size: 10px; font-weight: 600; }
.class-student-control, .class-student-single { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border: 1px solid #dbe2f0; border-radius: 9px; background: #fff; color: #434b63; text-align: left; }
.class-student-control:hover { border-color: #aeb9fb; }
.class-student-single { justify-content: flex-start; }
.class-student-selection { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; }
.student-name-chip { max-width: 110px; min-height: 24px; display: inline-flex; align-items: center; padding: 0 9px; overflow: hidden; border-radius: 6px; background: #f3f5f9; color: #505971; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.student-name-chip.more { flex: 0 0 auto; background: #edf0ff; color: var(--primary-dark); }
.student-selection-empty { color: #9aa3b7; font-size: 10px; }
.class-student-control b { color: var(--primary); font-size: 10px; font-weight: 650; }

.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-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; }

.course-modal-backdrop { padding: 22px; }
.class-student-popover-layer { position: fixed; z-index: 80; inset: 0; pointer-events: none; }
.class-student-popover-dismiss { position: fixed; inset: 0; pointer-events: auto; }
.class-student-popover { position: fixed; width: 360px; max-height: min(430px, calc(100vh - 40px)); display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; border: 1px solid #dce2ef; border-radius: 12px; background: #fff; box-shadow: 0 18px 48px rgba(38, 47, 85, .18); }
.class-student-popover.large { width: 520px; }
.class-student-picker-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #edf0f6; }
.class-student-picker-head > div { display: flex; align-items: baseline; gap: 8px; }
.class-student-picker-head strong { color: #3f475f; font-size: 13px; }
.class-student-picker-head span { color: #8b94aa; font-size: 10px; }
.class-student-picker-head button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: #8a93aa; font-size: 18px; }
.class-student-picker-head button:hover { background: #f2f4f8; }
.class-student-search { padding: 10px 10px 2px; }
.class-student-search input { width: 100%; height: 34px; padding: 0 11px; border: 1px solid #dfe4ef; border-radius: 8px; outline: 0; background: #fbfcfe; color: #434b63; font-size: 11px; }
.class-student-search input:focus { border-color: #aeb9fb; background: #fff; box-shadow: 0 0 0 3px rgba(91, 104, 246, .06); }
.class-student-search input::placeholder { color: #a0a8ba; }
.class-student-select-all { min-height: 42px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 9px; align-items: center; margin: 10px 10px 4px; padding: 0 10px; border: 0; border-radius: 8px; background: #f6f8fc; color: #4d5570; text-align: left; }
.class-student-select-all:hover { background: #f0f3fb; }
.class-student-select-all:disabled { cursor: default; opacity: 1; }
.class-student-select-all strong { font-size: 12px; }
.class-student-select-all small { color: #8b94aa; font-size: 10px; }
.class-student-list { display: grid; gap: 3px; overflow-y: auto; padding: 4px 10px 10px; }
.class-student-popover.large .class-student-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.class-student-row { min-height: 42px; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 9px; align-items: center; padding: 6px 10px; border: 0; border-radius: 8px; background: #fff; color: #4d5570; text-align: left; }
button.class-student-row:hover { background: #f6f8ff; }
.class-student-row.selected { background: #f2f4ff; }
.class-student-check { width: 18px; height: 18px; display: grid; place-items: center; border: 1px solid #cdd4e5; border-radius: 4px; background: #fff; color: #fff; font-size: 11px; }
.class-student-row.selected .class-student-check, .class-student-select-all.selected .class-student-check { border-color: var(--primary); background: var(--primary); }
.class-student-row strong, .class-student-row small { display: block; }
.class-student-row strong { font-size: 12px; }
.class-student-row small { margin-top: 3px; color: #8992a8; font-size: 9px; }
.class-student-row.disabled { background: #fafbfc; color: #a1a8b8; }
.class-student-row.disabled .class-student-check { border-color: #dde1ea; background: #f0f2f6; color: #aeb5c4; }
.class-student-empty { padding: 24px; color: #8b94aa; text-align: center; font-size: 11px; }
.course-picker-modal { width: min(1080px, 100%); overflow: hidden; border-radius: 18px; background: #fff; }
.course-modal-head { min-height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.course-modal-head h2 { margin: 0; font-size: 18px; }
.course-modal-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.course-catalog-layout { min-height: 540px; display: grid; grid-template-columns: 285px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.course-catalog-sidebar { padding: 18px; border-right: 1px solid var(--line); background: #fbfcff; }
.course-book-select { display: grid; gap: 6px; }
.course-book-select > span { color: var(--muted); font-size: 11px; }
.course-chapter-tree { display: grid; gap: 5px; margin-top: 13px; }
.course-chapter-tree button { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 0; border-radius: 8px; background: transparent; color: #4f566f; text-align: left; font-weight: 600; }
.course-chapter-tree button span { color: #929bb8; font-size: 16px; }
.course-chapter-tree button:hover { background: #f0f3ff; }
.course-chapter-tree button.active { background: #e9edff; color: var(--primary-dark); }
.course-catalog-content { max-height: 540px; overflow: auto; padding: 18px 20px 28px; }
.course-catalog-section + .course-catalog-section { margin-top: 24px; }
.course-catalog-section h3 { margin: 0 0 11px; color: #4f566f; font-size: 14px; }
.course-catalog-section > div { display: grid; gap: 9px; }
.course-catalog-item { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid transparent; border-radius: 10px; background: #f4f6ff; }
.course-catalog-item.selected { border-color: #c9d0ff; background: #f0f3ff; }
.course-catalog-item > div { display: flex; align-items: center; gap: 7px; }
.course-catalog-item > div:first-child { min-width: 0; color: #4f566f; }
.course-catalog-item > div:first-child strong { font-size: 13px; }
.course-catalog-item > div:first-child span { color: var(--muted); font-size: 11px; }
.course-catalog-item > div:last-child { flex: 0 0 auto; }
.course-join-button { min-width: 76px; height: 30px; padding: 0 13px; border: 1px solid #aeb8fc; border-radius: 999px; background: #fff; color: var(--primary); font-size: 11px; }
.course-join-button:hover { background: var(--primary-weak); }
.course-join-button.selected { background: var(--primary); color: #fff; }
.course-join-button:disabled { border-color: #dce1ef; background: #f3f5f9; color: #98a0b5; }
.course-modal-foot { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 20px; }
.course-modal-foot > div:last-child { display: flex; gap: 9px; }
.course-modal-foot > div:first-child { color: #586079; font-size: 12px; }
.course-modal-foot > div:first-child strong { color: var(--primary); }
.course-preview-modal, .course-update-modal { width: min(560px, 100%); overflow: hidden; border-radius: 18px; background: #fff; }
.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; }
.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-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; }
.detail-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.detail-actions { display: flex; gap: 8px; }
.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); }
.content-detail-panel { padding: 20px; }
.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; }
.content-list { display: grid; gap: 9px; }
.content-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 120px 90px auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid var(--line); border-radius: 11px; }
.content-row strong, .content-row small { display: block; }
.content-row small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.content-metric { color: #4e5672; font-size: 12px; }

.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: 520px; 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; }
.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: 12px; line-height: 1.4; }
.structure-children small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.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(4, minmax(0, 1fr)); }
.report-metric { min-height: 100px; padding: 15px 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; }
.report-kicker { display: block; margin-bottom: 5px; color: var(--primary); font-size: 11px; font-weight: 650; }
.report-remind { min-width: 92px; }
.report-time-facts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 12px; padding: 0 2px; }
.report-time-facts > div { display: flex; align-items: baseline; gap: 7px; }
.report-time-facts > div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.report-time-facts span { color: var(--muted); font-size: 10px; }
.report-time-facts strong { color: #4a526b; font-size: 11px; }
.report-time-facts.empty strong { color: var(--muted); font-weight: 500; }
.overview-actions { display: flex; align-items: center; gap: 10px; }
.overview-actions .secondary { color: #7d86a0; }
.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-list article { display: grid; grid-template-columns: minmax(300px, 1.7fr) minmax(150px, .8fr) minmax(95px, .45fr) minmax(95px, .45fr) auto; gap: 15px; 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; }

.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-result-page { display: grid; gap: 14px; }
.answer-result-toolbar { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 2px; }
.answer-result-summary { display: flex; align-items: baseline; gap: 10px; }
.answer-result-summary > span { color: var(--muted); font-size: 11px; }
.answer-result-summary p { margin: 0; color: #69728c; font-size: 12px; }
.answer-result-summary strong { color: #3f4863; }
.answer-cards { display: grid; gap: 12px; }
.answer-filter-bar { display: flex; gap: 8px; }
.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-question-card { padding: 20px 22px 0; border: 1px solid var(--line); border-radius: 13px; background: #fff; box-shadow: 0 5px 16px rgba(64, 76, 132, .035); }
.answer-question-head { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; }
.answer-no { color: #4d5670; font-size: 14px; font-weight: 700; line-height: 1.65; }
.answer-question-head h3 { margin: 0; color: #3f4862; font-size: 14px; font-weight: 650; line-height: 1.75; }
.answer-question-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.answer-question-meta span { padding: 3px 7px; border: 1px solid #e1e6f2; border-radius: 5px; background: #f7f9fd; color: #77819a; font-size: 10px; }
.answer-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; margin: 17px 0 0 40px; }
.answer-options p { margin: 0; color: #555e77; font-size: 12px; line-height: 1.65; }
.answer-question-card footer { min-height: 54px; display: flex; align-items: center; margin-top: 18px; padding: 0 0 0 40px; border-top: 1px dashed #e2e6f0; }
.answer-result { min-width: 68px; padding: 5px 9px; border-radius: 7px; background: #f0f2f7; color: var(--muted); text-align: center; font-size: 11px; font-weight: 650; }
.answer-result.correct { background: var(--green-weak); color: var(--green); }
.answer-result.wrong { background: var(--red-weak); color: var(--red); }
.answer-result.unanswered { background: #f0f2f7; color: #7b849c; }
.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; }

@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: minmax(180px, 1fr) minmax(180px, 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; }
  .course-assignment-scope-head { align-items: flex-start; flex-direction: column; }
  .class-target-fields { grid-template-columns: 1fr 1fr; }
  .class-student-trigger { grid-column: 1 / -1; }
  .source-panel { border-top: 1px solid var(--line); border-left: 0; }
  .course-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)); }
}

@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; }
  .unified-target-fields { grid-template-columns: 1fr; }
  .class-student-popover, .class-student-popover.large { width: calc(100vw - 40px); }
  .class-student-popover.large .class-student-list { grid-template-columns: 1fr; }
  .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-catalog-layout { grid-template-columns: 1fr; }
  .course-catalog-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .course-chapter-tree { grid-template-columns: 1fr 1fr; }
  .course-catalog-item { align-items: flex-start; flex-direction: column; }
  .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; }
  .homework-insight-grid { grid-template-columns: 1fr; }
  .content-row, .course-overview-list article { grid-template-columns: 40px minmax(0, 1fr); }
  .content-row > :nth-child(n+3), .course-overview-list article > :nth-child(n+2) { grid-column: 2; }
  .report-time-facts, .learning-record-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .report-time-facts > div + div { padding-left: 0; border-left: 0; }
  .answer-result-toolbar { align-items: flex-start; flex-direction: column; }
  .answer-options { grid-template-columns: 1fr; }
  .compose-footer { align-items: stretch; }
  .compose-footer-actions { justify-content: flex-end; }
}