:root {
    --teach-ink: #172033;
    --teach-muted: #647084;
    --teach-line: #dfe5ee;
    --teach-bg: #f5f7fb;
    --teach-indigo: #5558e8;
    --teach-indigo-dark: #3d40c5;
    --teach-soft: #eef0ff;
    --teach-teal: #0d9488;
    --teach-white: #fff;
}

* { box-sizing: border-box; }
body.teaching-page { margin: 0; color: var(--teach-ink); background: var(--teach-bg); font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.teaching-topbar { position: sticky; top: 0; z-index: 20; min-height: 68px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(220,226,237,.9); background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.teaching-brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
.teaching-brand > .school-logo { display: block; width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; background: #fff; }
.teaching-brand strong { font-size: 18px; }.teaching-brand small { padding-left: 9px; border-left: 1px solid var(--teach-line); color: var(--teach-muted); }
.teaching-topbar nav { display: flex; align-items: center; gap: 20px; }.teaching-topbar nav a { color: #465268; text-decoration: none; font-size: 14px; font-weight: 650; }
.teaching-topbar nav form { margin: 0; }.topbar-cta { padding: 9px 14px; border-radius: 9px; color: #fff !important; background: var(--teach-indigo); }.link-button { padding: 0; border: 0; color: var(--teach-muted); background: none; cursor: pointer; }
.user-chip { padding: 8px 12px; border-radius: 999px; color: #4a4cb4; background: var(--teach-soft); font-size: 13px; font-weight: 700; }
.workspace-tabs { min-height: 51px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: stretch; gap: 28px; overflow-x: auto; border-bottom: 1px solid var(--teach-line); background: #fff; }.workspace-tabs a { position: relative; display: flex; align-items: center; color: #687488; text-decoration: none; white-space: nowrap; font-size: 13px; font-weight: 700; }.workspace-tabs a::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: transparent; }.workspace-tabs a:hover, .workspace-tabs a.is-active { color: var(--teach-indigo); }.workspace-tabs a.is-active::after { background: var(--teach-indigo); }
.teaching-main { width: min(calc(100% - 48px), 1240px); margin: 0 auto; padding: 48px 0 80px; }
.flash-stack { position: fixed; z-index: 30; top: 82px; left: 50%; width: min(calc(100% - 32px), 600px); transform: translateX(-50%); }.flash { margin-bottom: 8px; padding: 13px 16px; border: 1px solid #cfd6ff; border-radius: 10px; color: #36399f; background: #f2f3ff; box-shadow: 0 10px 28px rgba(35,43,75,.12); }.flash--error { border-color: #fecaca; color: #a52b2b; background: #fff1f1; }.flash--success { border-color: #a7e1d7; color: #08756b; background: #ecfdf8; }
.eyebrow, .form-kicker, .panel-heading span, .section-title span { display: block; margin-bottom: 10px; color: var(--teach-indigo); font-size: 11px; font-weight: 800; letter-spacing: .14em; }

.auth-layout { min-height: calc(100vh - 165px); display: grid; grid-template-columns: minmax(0,1.1fr) minmax(380px,.75fr); align-items: center; gap: 80px; }
.auth-intro { padding: 40px 0 40px 4vw; }.auth-intro h1 { margin: 0 0 24px; font-size: clamp(38px, 4.4vw, 62px); line-height: 1.1; letter-spacing: -.045em; }.auth-intro > p { max-width: 610px; color: var(--teach-muted); font-size: 18px; line-height: 1.8; }
.role-preview { width: fit-content; margin-top: 36px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--teach-line); border-radius: 12px; color: #3e4960; background: #fff; font-size: 13px; font-weight: 750; }.role-preview i { width: 28px; height: 1px; background: #b5bed0; }
.auth-card { padding: 36px; display: grid; gap: 20px; border: 1px solid var(--teach-line); border-radius: 20px; background: #fff; box-shadow: 0 28px 70px rgba(34,46,75,.1); }.auth-card h2 { margin: 0 0 8px; font-size: 28px; }.auth-card > div > p, .auth-switch { margin: 0; color: var(--teach-muted); font-size: 14px; }.auth-switch { text-align: center; }.auth-switch a { color: var(--teach-indigo); font-weight: 750; }
label { display: grid; gap: 8px; color: #414d62; font-size: 13px; font-weight: 700; }input, select, textarea { width: 100%; padding: 12px 13px; border: 1px solid #d5dce7; border-radius: 9px; outline: none; color: var(--teach-ink); background: #fff; transition: border-color .15s, box-shadow .15s; }textarea { resize: vertical; line-height: 1.6; }input:focus, select:focus, textarea:focus { border-color: #8d90f5; box-shadow: 0 0 0 3px rgba(85,88,232,.12); }
.primary-action, .secondary-action { min-height: 42px; padding: 10px 17px; border-radius: 9px; cursor: pointer; font-weight: 750; }.primary-action { border: 1px solid var(--teach-indigo); color: #fff; background: var(--teach-indigo); }.primary-action:hover { background: var(--teach-indigo-dark); }.secondary-action { border: 1px solid #cdd5e2; color: #465269; background: #fff; }
.role-selector { margin: 0; padding: 0; border: 0; }.role-selector legend { margin-bottom: 8px; color: #414d62; font-size: 13px; font-weight: 700; }.role-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.role-selector legend { grid-column: 1/-1; }.role-selector label { position: relative; display: block; }.role-selector input { position: absolute; opacity: 0; }.role-selector span { height: 100%; padding: 13px; display: grid; gap: 3px; border: 1px solid #d7ddea; border-radius: 10px; cursor: pointer; }.role-selector small { color: var(--teach-muted); font-weight: 500; }.role-selector input:checked + span { border-color: var(--teach-indigo); color: #3538a6; background: var(--teach-soft); box-shadow: inset 0 0 0 1px var(--teach-indigo); }

.dashboard-heading { margin-bottom: 36px; display: flex; align-items: end; justify-content: space-between; gap: 36px; }.dashboard-heading h1 { max-width: 780px; margin: 0 0 12px; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.18; letter-spacing: -.035em; }.dashboard-heading p { margin: 0; color: var(--teach-muted); font-size: 16px; }.summary-card { min-width: 210px; padding: 22px; display: grid; border: 1px solid var(--teach-line); border-radius: 14px; background: #fff; }.summary-card strong { color: var(--teach-indigo); font-size: 34px; }.summary-card span { margin: 3px 0 8px; font-weight: 750; }.summary-card small { color: var(--teach-muted); }
.page-heading { margin-bottom: 30px; display: flex; align-items: end; justify-content: space-between; gap: 28px; }.page-heading h1 { margin: 0 0 10px; font-size: clamp(32px,3.5vw,46px); letter-spacing: -.035em; }.page-heading p { margin: 0; color: var(--teach-muted); }.page-heading-action { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }.count-badge { padding: 10px 14px; border-radius: 999px; color: #474ab7; background: var(--teach-soft); font-size: 13px; font-weight: 750; }
.overview-stats { margin-bottom: 24px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.overview-stats a { padding: 24px; display: grid; border: 1px solid var(--teach-line); border-radius: 14px; text-decoration: none; background: #fff; transition: transform .18s, box-shadow .18s; }.overview-stats a:hover { transform: translateY(-2px); box-shadow: 0 15px 32px rgba(42,50,85,.07); }.overview-stats span { color: var(--teach-muted); font-size: 12px; font-weight: 750; }.overview-stats strong { margin: 6px 0 12px; color: var(--teach-indigo); font-size: 36px; }.overview-stats small { color: #4e5b70; }.overview-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }.overview-action { min-height: 210px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--teach-line); border-radius: 15px; color: var(--teach-ink); text-decoration: none; background: #fff; }.overview-action > span { color: var(--teach-indigo); font-size: 10px; font-weight: 800; letter-spacing: .14em; }.overview-action h2 { margin: 22px 0 8px; font-size: 23px; }.overview-action p { margin: 0 0 22px; flex: 1; color: var(--teach-muted); }.overview-action > strong { color: var(--teach-indigo); font-size: 13px; }.primary-overview-action { color: #fff; border-color: var(--teach-indigo); background: linear-gradient(135deg,#5558e8,#4244bf); }.primary-overview-action > span, .primary-overview-action > strong, .primary-overview-action p { color: rgba(255,255,255,.88); }.overview-recent { margin-top: 46px; }.section-link { color: var(--teach-indigo); text-decoration: none; font-size: 13px; font-weight: 750; }.recent-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.recent-list article { padding: 20px; border: 1px solid var(--teach-line); border-radius: 13px; background: #fff; }.recent-list h3 { margin: 14px 0 20px; font-size: 16px; }
.management-grid { display: grid; grid-template-columns: minmax(320px,.75fr) minmax(0,1.25fr); align-items: start; gap: 24px; }.student-table { padding: 8px 24px 20px; }.student-table > div:not(.empty-state) { padding: 14px 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; border-bottom: 1px solid #edf0f4; }.student-table > div:last-child { border-bottom: 0; }.student-table span:not(.student-avatar) { display: grid; gap: 2px; }.student-table small { color: var(--teach-muted); }.student-table form { margin: 0; }.student-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: #4548bb; background: var(--teach-soft); font-weight: 800; }.focused-form-panel { max-width: 920px; }.assignment-form-wide { gap: 22px; }.form-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 18px; }.form-submit { width: min(100%,280px); }.standalone-list { padding-top: 2px; }
.teacher-grid { display: grid; grid-template-columns: minmax(340px,.82fr) minmax(0,1.35fr); align-items: start; gap: 24px; }.panel { border: 1px solid var(--teach-line); border-radius: 16px; background: #fff; }.panel-heading { padding: 23px 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--teach-line); }.panel-heading span { margin-bottom: 6px; }.panel-heading h2 { margin: 0; font-size: 21px; }.panel-heading b { color: #dce0e8; font-size: 32px; }.assignment-form { padding: 24px; display: grid; gap: 18px; }.student-picker { margin: 0; padding: 0; border: 0; }.student-picker legend { font-size: 13px; font-weight: 750; }.student-picker > p { margin: 6px 0 10px; color: var(--teach-muted); font-size: 12px; line-height: 1.5; }.student-picker > div { max-height: 150px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.student-picker label { position: relative; display: block; }.student-picker input { position: absolute; opacity: 0; }.student-picker label span { padding: 9px 10px; display: grid; border: 1px solid #dfe4ec; border-radius: 8px; cursor: pointer; }.student-picker label small { color: var(--teach-muted); font-weight: 500; }.student-picker input:checked + span { border-color: var(--teach-indigo); background: var(--teach-soft); }.empty-inline { grid-column: 1/-1; padding: 10px; color: var(--teach-muted); background: #f7f8fb; font-size: 12px; }
.teacher-side { display: grid; gap: 24px; }.student-create-form { padding: 20px 24px; display: grid; gap: 14px; border-bottom: 1px solid var(--teach-line); }.default-password-note { padding: 10px 12px; border-radius: 8px; color: #586478; background: #f5f6fa; font-size: 12px; }.default-password-note code, .reset-content code { color: #3538a6; font-family: Consolas, monospace; font-weight: 800; }.student-account-list { max-height: 260px; overflow: auto; padding: 8px 24px 16px; }.student-account-list > div { padding: 11px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf0f4; }.student-account-list > div:last-child { border-bottom: 0; }.student-account-list span { display: grid; gap: 2px; }.student-account-list small { color: var(--teach-muted); }.student-account-list p { color: var(--teach-muted); font-size: 13px; }.student-account-list form { margin: 0; }.text-action { padding: 5px 0; border: 0; color: var(--teach-indigo); background: transparent; cursor: pointer; font-size: 11px; font-weight: 750; }
.assignment-list { padding: 8px 24px 24px; }.teacher-assignment { padding: 22px 0; border-bottom: 1px solid var(--teach-line); }.teacher-assignment:last-child { border-bottom: 0; }.teacher-assignment.is-archived { opacity: .58; }.assignment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }.assignment-meta span { padding: 5px 8px; border-radius: 6px; color: #5c687b; background: #f0f2f6; font-size: 11px; font-weight: 750; }.assignment-meta .status-pill { color: #3f42bd; background: var(--teach-soft); }.teacher-assignment h3, .student-task h3 { margin: 14px 0 8px; font-size: 19px; }.teacher-assignment > p, .student-task > p { margin: 0; color: var(--teach-muted); font-size: 13px; line-height: 1.65; }.progress-line { margin-top: 18px; display: flex; align-items: center; gap: 12px; }.progress-line > div { height: 7px; flex: 1; overflow: hidden; border-radius: 8px; background: #eceff4; }.progress-line i { height: 100%; display: block; border-radius: inherit; background: var(--teach-indigo); }.progress-line strong { color: #4c5870; font-size: 12px; white-space: nowrap; }.teacher-assignment footer { margin-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }.teacher-assignment footer span { color: var(--teach-muted); font-size: 12px; }.teacher-assignment footer form { margin: 0; }
.empty-state { padding: 70px 24px; text-align: center; color: var(--teach-muted); }.empty-state strong { color: var(--teach-ink); font-size: 17px; }.empty-state p { margin: 8px 0 0; }

.student-section { margin-top: 42px; }.section-title { margin-bottom: 20px; display: flex; align-items: end; justify-content: space-between; gap: 28px; }.section-title span { margin-bottom: 6px; }.section-title h2 { margin: 0; font-size: 27px; }.section-title > p { max-width: 500px; margin: 0; color: var(--teach-muted); font-size: 13px; line-height: 1.6; text-align: right; }.student-task-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }.student-task { padding: 23px; border: 1px solid var(--teach-line); border-radius: 14px; background: #fff; }.student-task.status-completed { border-color: #b9dfd8; }.student-task.status-completed .status-pill { color: #08756b; background: #e6f8f4; }.due-date { margin-top: 14px; color: #9a5a15; font-size: 12px; font-weight: 700; }.task-actions { margin-top: 20px; display: flex; align-items: flex-start; gap: 12px; }.task-actions form { margin: 0; }.task-actions details { flex: 1; }.task-actions summary { width: fit-content; padding: 11px 15px; border: 1px solid #cdd5e2; border-radius: 9px; color: #465269; background: #fff; cursor: pointer; font-size: 13px; font-weight: 750; list-style: none; }.task-actions details form { margin-top: 12px; padding: 14px; display: grid; gap: 10px; border-radius: 10px; background: #f6f7fa; }.completed-note { align-self: center; color: var(--teach-teal); font-size: 12px; font-weight: 700; }.student-empty { grid-column: 1/-1; border: 1px dashed #ccd4e1; border-radius: 14px; background: #fff; }
.practice-section { padding-top: 38px; border-top: 1px solid var(--teach-line); }.practice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }.practice-grid a { min-height: 190px; padding: 21px; display: flex; flex-direction: column; border: 1px solid var(--teach-line); border-radius: 13px; text-decoration: none; background: #fff; transition: transform .18s, box-shadow .18s, border-color .18s; }.practice-grid a:hover { transform: translateY(-3px); border-color: #bdc0fa; box-shadow: 0 16px 35px rgba(42,50,85,.08); }.practice-grid span { color: var(--teach-indigo); font-size: 10px; font-weight: 800; letter-spacing: .1em; }.practice-grid h3 { margin: 12px 0 7px; }.practice-grid p { margin: 0 0 16px; flex: 1; color: var(--teach-muted); font-size: 13px; line-height: 1.6; }.practice-grid strong { color: var(--teach-indigo); font-size: 12px; }
.teacher-demo-section { margin-top: 50px; }
.settings-heading { margin-bottom: 30px; }.settings-heading h1 { margin: 0 0 10px; font-size: clamp(34px,4vw,48px); letter-spacing: -.035em; }.settings-heading p { margin: 0; color: var(--teach-muted); }.password-grid { max-width: 920px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 24px; }.password-card > form { padding: 24px; display: grid; gap: 18px; }.reset-content { padding: 24px; }.reset-content > p { margin: 0 0 15px; color: var(--teach-muted); line-height: 1.65; }.reset-content > code { padding: 12px 14px; display: block; border-radius: 9px; background: var(--teach-soft); font-size: 16px; }.reset-content form { margin-top: 24px; }.danger-action { color: #a52b2b; border-color: #efc7c7; background: #fff7f7; }

@media (max-width: 900px) {
    .teaching-topbar { padding: 0 18px; }.workspace-tabs { padding: 0 18px; gap: 22px; }.user-chip, .teaching-brand small { display: none; }.teaching-topbar nav { gap: 12px; }
    .teaching-main { width: min(calc(100% - 28px), 720px); padding-top: 30px; }.auth-layout { grid-template-columns: 1fr; gap: 16px; }.auth-intro { padding: 24px 0 10px; }.auth-intro h1 { font-size: 38px; }.role-preview { display: none; }.auth-card { padding: 25px; }
    .dashboard-heading, .page-heading { align-items: stretch; flex-direction: column; }.summary-card { min-width: 0; }.teacher-grid, .password-grid, .management-grid { grid-template-columns: 1fr; }.student-task-grid { grid-template-columns: 1fr; }.practice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.section-title { align-items: start; flex-direction: column; gap: 8px; }.section-title > p { text-align: left; }.recent-list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .teaching-topbar nav > a:first-child { display: none; }.teaching-brand strong { font-size: 16px; }.teaching-main { width: min(calc(100% - 20px), 520px); }.auth-intro h1 { font-size: 32px; }.role-selector, .student-picker > div, .overview-stats, .overview-actions, .form-columns { grid-template-columns: 1fr; }.practice-grid { grid-template-columns: 1fr; }.task-actions { flex-direction: column; }.student-task { padding: 18px; }.student-table > div:not(.empty-state) { grid-template-columns: auto 1fr; }.student-table form { grid-column: 1/-1; }.student-table form button { width: 100%; }
}

.submission-details { min-width: 220px; }.submission-details[open] { flex-basis: 100%; }.submission-details label small { color: var(--teach-muted); font-weight: 500; }.submitted-files { margin-top: 13px; display: grid; gap: 5px; }.submitted-files span { color: #4e5b70; font-size: 11px; }.submitted-files a { color: var(--teach-indigo); font-weight: 700; }
.assignment-row-actions { display: flex; align-items: center; gap: 8px; }.assignment-row-actions > a { display: inline-flex; align-items: center; text-decoration: none; }.submission-panel { overflow: hidden; }.submission-table { padding: 15px 20px; display: grid; grid-template-columns: 1.05fr .65fr 1.2fr 1.2fr 1.4fr; align-items: center; gap: 16px; border-bottom: 1px solid var(--teach-line); font-size: 12px; }.submission-table:last-child { border-bottom: 0; }.submission-table > span { min-width: 0; display: grid; gap: 4px; }.submission-table strong { font-size: 13px; }.submission-table small, .submission-table em { color: var(--teach-muted); font-style: normal; }.submission-table a { overflow: hidden; color: var(--teach-indigo); text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }.submission-table p { margin: 0; color: #525e72; line-height: 1.55; }.submission-table-head { color: #657087; background: #f7f8fb; font-size: 11px; font-weight: 800; }.submission-status { width: fit-content; padding: 5px 8px; border-radius: 999px; color: #6b7280; background: #f0f2f5; font-style: normal; font-weight: 750; }.submission-status.status-completed { color: #08756b; background: #e6f8f4; }.submission-status.status-started { color: #9a5a15; background: #fff4df; }
@media (max-width: 900px) { .submission-table { grid-template-columns: 1fr 1fr; }.submission-table-head { display: none; }.submission-table > span:last-child { grid-column: 1/-1; } }

.custom-data-action { display: inline-flex; align-items: center; text-decoration: none; white-space: nowrap; }
.practice-choice { padding: 22px; display: flex; flex-direction: column; border: 1px solid var(--teach-line); border-radius: 13px; background: #fff; }.practice-choice > span { color: var(--teach-indigo); font-size: 11px; font-weight: 750; }.practice-choice h3 { margin: 12px 0 8px; }.practice-choice > p { flex: 1; margin: 0 0 20px; color: var(--teach-muted); font-size: 13px; line-height: 1.6; }.practice-choice-actions { display: flex; flex-wrap: wrap; gap: 8px; }.practice-grid .practice-choice-actions a { min-height: 42px; padding: 10px 12px; display: inline-flex; align-items: center; font-size: 12px; text-decoration: none; border-radius: 9px; }.practice-grid .practice-choice-actions .primary-action { color: #fff; background: var(--teach-indigo); border-color: var(--teach-indigo); }
.iot-feature-picker { margin: 0; padding: 14px; border: 1px solid var(--teach-line); border-radius: 9px; }.iot-feature-picker legend { font-size: 13px; font-weight: 750; }.iot-feature-picker p { color: var(--teach-muted); font-size: 12px; }.iot-feature-picker label { display: flex; align-items: center; gap: 8px; margin: 8px 0; }.iot-feature-picker input { width: 16px; height: 16px; }.iot-inference-panel { margin-top: 22px; }.iot-sample-form { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); align-items: end; gap: 14px; }.iot-inference-panel table { width: 100%; border-collapse: collapse; }.iot-inference-panel th,.iot-inference-panel td { padding: 10px; border: 1px solid var(--teach-line); text-align: left; }.iot-inference-panel p { color: var(--teach-muted); font-size: 13px; line-height: 1.7; }
.student-dataset-upload { margin-bottom: 22px; padding: 26px 28px; }.student-dataset-upload > div:first-child { max-width: 760px; }.student-dataset-upload h2 { margin: 0 0 7px; }.student-dataset-upload p, .student-dataset-upload small { margin: 0; color: var(--teach-muted); font-size: 12px; line-height: 1.55; font-weight: 500; }.student-dataset-upload form { margin-top: 20px; padding-top: 20px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr) 150px; align-items: start; gap: 18px; border-top: 1px solid var(--teach-line); }.student-dataset-upload form label { min-width: 0; }.student-dataset-upload form input { min-height: 50px; }.student-dataset-upload form input[type="file"] { padding: 10px 12px; }.student-dataset-upload form button { width: 100%; min-height: 50px; margin-top: 27px; }.current-dataset { margin-top: 18px; padding: 11px 13px; display: flex; justify-content: space-between; gap: 12px; border-radius: 8px; color: #3f42bd; background: var(--teach-soft); font-size: 12px; }.custom-upload-empty { margin-top: 22px; }
.custom-lab-layout { display: grid; grid-template-columns: minmax(290px,.7fr) minmax(0,1.5fr); align-items: start; gap: 22px; }.custom-control-panel { position: sticky; top: 140px; }.custom-panel-body { padding: 22px; }.lab-loading, .lab-error { padding: 14px; border-radius: 9px; color: var(--teach-muted); background: #f5f6fa; }.lab-error { color: #a52b2b; background: #fff1f1; }.dataset-summary > strong { display: block; margin-bottom: 14px; overflow-wrap: anywhere; }.dataset-summary > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.dataset-summary span { padding: 10px; display: grid; border-radius: 8px; color: #3437a3; background: var(--teach-soft); font-weight: 800; }.dataset-summary small { color: var(--teach-muted); font-size: 10px; font-weight: 600; }.parameter-form { margin-top: 22px; display: grid; gap: 18px; }.parameter-form > div { display: grid; gap: 13px; }.parameter-form button { width: 100%; }.parameter-note { margin: 15px 0 0; color: var(--teach-muted); font-size: 11px; line-height: 1.6; }.result-content { padding: 22px; }.training-busy { padding: 80px 20px; text-align: center; color: var(--teach-indigo); font-weight: 750; }.metric-cards { margin-bottom: 18px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.metric-cards > div { padding: 16px; display: grid; gap: 7px; border-radius: 10px; background: #f4f5fb; }.metric-cards span { color: var(--teach-muted); font-size: 11px; }.metric-cards strong { color: var(--teach-indigo); font-size: 22px; }.chart-wrap { overflow-x: auto; }.chart-wrap canvas { width: 100%; min-width: 560px; height: auto; border: 1px solid var(--teach-line); border-radius: 10px; }.result-content h3 { margin: 24px 0 4px; }.result-content h3 + p { margin: 0 0 12px; color: var(--teach-muted); font-size: 12px; }.preview-panel { margin-top: 22px; overflow: hidden; }.data-preview { padding: 20px; }.preview-scroll { overflow-x: auto; }.data-preview table, .confusion-table { width: 100%; border-collapse: collapse; font-size: 12px; }.data-preview th, .data-preview td, .confusion-table th, .confusion-table td { padding: 9px; border: 1px solid var(--teach-line); text-align: left; white-space: nowrap; }.data-preview th, .confusion-table th { background: #f6f7fb; }.image-file-preview { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }.image-file-preview div { min-width: 0; padding: 13px; display: grid; gap: 4px; border: 1px solid var(--teach-line); border-radius: 9px; }.image-file-preview span { color: var(--teach-indigo); font-size: 10px; font-weight: 800; }.image-file-preview strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.image-file-preview small { color: var(--teach-muted); }
@media (max-width: 900px) { .custom-lab-layout { grid-template-columns: 1fr; }.custom-control-panel { position: static; }.student-dataset-upload form { grid-template-columns: 1fr 1fr; }.student-dataset-upload form button { grid-column: 1/-1; width: min(100%,220px); margin-top: 0; }.image-file-preview { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .student-dataset-upload { padding: 20px; }.metric-cards, .image-file-preview, .student-dataset-upload form { grid-template-columns: 1fr; }.custom-result-panel .panel-heading { align-items: flex-start; flex-direction: column; gap: 12px; }.current-dataset { flex-direction: column; }.student-dataset-upload form button { grid-column: auto; width: 100%; } }
.knn-image-guide {padding:22px;margin-bottom:20px}
.image-file-preview img {width:100%;height:100px;object-fit:contain;background:#f6f8fc;border-radius:6px}
.knn-image-guide h2 {font-size:18px;margin:0 0 12px}
.knn-image-guide p,.knn-image-predict p {font-size:13px;line-height:1.8;color:var(--teach-muted);overflow-wrap:anywhere}
.knn-image-predict {margin-top:22px;scroll-margin-top:140px}
.knn-image-workspace {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.knn-image-workspace form {display:grid;gap:16px;min-width:0}
.knn-image-workspace label {display:grid;gap:10px;font-size:13px;overflow-wrap:anywhere}
.knn-image-workspace input {max-width:100%;box-sizing:border-box}
#imagePredictPreview {width:100%;height:240px;object-fit:contain;border:1px solid var(--teach-line);border-radius:10px;background:#f7f9fd}
#imagePredictPreview[hidden] {display:none}
.knn-image-output {min-width:0;padding:18px;border:1px solid var(--teach-line);border-radius:10px;background:#fbfcff;overflow-wrap:anywhere}
.knn-image-output h3 {font-size:20px;line-height:1.6}
.knn-image-output h3 strong {color:var(--teach-indigo)}
.image-vote-shares {display:grid;gap:18px;margin:20px 0}
.image-vote-shares progress {width:100%;height:16px;accent-color:var(--teach-indigo)}
@media(max-width:700px){.knn-image-workspace {grid-template-columns:minmax(0,1fr)}}