/* V1.0: quiet chrome, clear actions and compact adjustment history. */
#classSwitchDialog footer { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
#classSwitchDialog footer > button { width:100%; min-width:0; min-height:44px; margin:0; white-space:nowrap; }
#classSwitchDialog .class-school-field { display:grid; gap:8px; margin:16px 0; }
#classSwitchDialog .class-school-field > span { font-size:14px; font-weight:650; }
#classSwitchDialog .class-school-field small { margin-left:6px; font-size:12px; font-weight:400; color:var(--muted); }
#classSwitchDialog .class-school-field input { width:100%; min-width:0; min-height:44px; padding:10px 12px; font-size:16px; }
.header-account #teacherSyncStatusButton {
  position:relative; width:38px; height:38px; border-radius:12px;
  border:1px solid color-mix(in srgb,currentColor 16%,transparent);
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,currentColor 7%,var(--surface)));
  box-shadow:0 2px 5px #172b4610,inset 0 1px 0 #ffffff80;
  transition:background .2s,box-shadow .2s; color:#58728b;
}
.header-account #teacherSyncStatusButton:hover { box-shadow:0 3px 10px #172b4620; }
.header-account #teacherSyncStatusButton .sync-status-icon { width:25px; height:25px; flex-basis:25px; }
.header-account #teacherSyncStatusButton[data-state="saved"] { color:#26876a; }
.header-account #teacherSyncStatusButton[data-state="error"],
.header-account #teacherSyncStatusButton[data-state="conflict"] { color:#c66b23; }
.header-account #teacherSyncStatusButton[data-state="pending"] { color:#ac8629; }
.header-account #teacherSyncStatusButton.is-syncing { color:#417cc0; opacity:1; }
.header-account #teacherSyncStatusButton.is-syncing .sync-status-icon { animation:none; }
.sync-orbit { transform-origin:13px 18px; }
.is-syncing .sync-orbit { animation:teacher-sync-spin 1.2s linear infinite; }
@media (min-width:761px) {
 .home-student-directory-head { display:flex; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:16px; }
 .home-student-directory-title { flex:1; }
 .home-student-directory-actions { display:flex; flex:0 0 auto; width:auto; margin:0 0 0 auto; padding:0; border:0; gap:8px; }
 .home-student-directory-actions button { width:auto; min-width:76px; }
}
.morality-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.morality-toolbar .morality-class-plus,.morality-toolbar .morality-class-minus { width:40px; min-width:40px; height:40px; padding:0; font-size:25px; line-height:1; border-radius:11px; }
.morality-toolbar .morality-class-plus { color:#148363; background:#ecf8f2; border-color:#c4e6d7; }
.morality-toolbar .morality-class-minus { color:#c05246; background:#fff2ee; border-color:#f0d0c8; }
.morality-dialog .morality-close-icon { display:grid; place-items:center; width:36px; height:36px; min-width:36px; min-height:36px; padding:8px; border:0; border-radius:50%; background:var(--surface-soft); color:var(--muted); }
.morality-close-icon svg,.record-delete svg { width:20px; height:20px; }
.morality-history-total { display:flex; align-items:baseline; gap:12px; padding:12px 0 18px; }
.morality-history-total > span { font-size:13px; color:var(--muted); }
.morality-history-total > strong { font-size:46px; line-height:1.1; letter-spacing:-2px; font-variant-numeric:tabular-nums; }
.morality-history-total > small { margin-left:auto; color:var(--muted); }
.morality-dialog .morality-records { margin:0; padding:0; display:flex; flex-direction:column; gap:8px; list-style:none; }
.morality-dialog .morality-records li { display:grid; grid-template-columns:32px 52px minmax(0,1fr) 34px; align-items:center; gap:10px; padding:12px 10px; border:1px solid color-mix(in srgb,var(--record-color) 15%,var(--line)); border-radius:12px; background:color-mix(in srgb,var(--record-color) 4%,var(--surface)); }
.record-plus { --record-color:#167d63; }
.record-minus { --record-color:#c35249; }
.record-number { display:grid; place-items:center; min-width:28px; min-height:28px; border-radius:8px; background:color-mix(in srgb,var(--record-color) 8%,var(--surface)); color:var(--record-color); font-size:12px; font-weight:650; font-variant-numeric:tabular-nums; }
.morality-records .record-delta { color:var(--record-color); font-size:26px; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.morality-records .record-detail { display:block; min-width:0; }
.morality-records .record-detail p { margin:0 0 4px; font-size:16px; font-weight:650; line-height:1.45; overflow-wrap:anywhere; color:var(--record-color); }
.morality-records .record-detail time { font-size:11px; color:var(--muted); }
.morality-records .record-delete { display:grid; place-items:center; padding:6px; width:34px; min-width:34px; min-height:36px; margin:0; border:0; border-radius:8px; color:var(--muted); background:transparent; }
.morality-records .record-delete:hover { color:#bd493f; background:#bd493f12; }
@media (max-width:600px) {
 .morality-header { flex-wrap:wrap; gap:10px; }
 .morality-toolbar { gap:6px; }
 .morality-toolbar button { font-size:12px; }
 .morality-dialog .morality-records li { grid-template-columns:26px 42px minmax(0,1fr) 30px; gap:6px; padding:10px 7px; }
 .morality-records .record-delta { font-size:23px; }
 .morality-records .record-detail p { font-size:15px; }
 .morality-records .record-delete { width:30px; min-width:30px; }
 .morality-history-total { gap:9px; }
 .morality-history-total > strong { font-size:40px; }
}
@media (prefers-reduced-motion:reduce) { .is-syncing .sync-orbit { animation-duration:3s; } }
/* Fixed history viewport; the shared rank renderer keeps this badge in sync. */
#moralityDialog.is-history { position:fixed; inset:0; box-sizing:border-box; width:min(720px,calc(100vw - 24px)); height:fit-content; max-height:min(620px,calc(100dvh - 32px)); margin:auto; overflow:hidden; }
#moralityDialog.is-history > header { flex-shrink:0; padding:12px 16px; }
#moralityDialog.is-history h2 { display:flex; align-items:center; gap:12px; min-width:0; font-size:22px; }
.history-score { font-size:22px; white-space:nowrap; }
.history-score small { font-size:12px; margin-left:3px; }
.history-rank { display:inline-grid; position:relative; isolation:isolate; width:62px; height:62px; flex:0 0 62px; place-items:center; }
.history-rank > span { position:relative; z-index:1; font-size:10px; text-align:center; width:44px; line-height:1.2; }
#moralityDialog.is-history .morality-dialog-content { display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:0 14px 14px; }
#moralityDialog.is-history .history-count { flex-shrink:0; margin:6px 0 10px; color:var(--muted); font-size:12px; }
#moralityDialog.is-history .morality-records { min-height:0; max-height:440px; overflow-y:auto; overscroll-behavior:contain; padding-right:4px; scrollbar-gutter:stable; }
#moralityDialog .record-detail { display:flex; align-items:center; flex-wrap:nowrap; gap:8px; }
#moralityDialog .record-detail p { flex:1; margin:0; min-width:0; }
#moralityDialog .record-detail time { flex:0 0 auto; white-space:nowrap; }
.student-cadre-group + .student-cadre-group { border-top:1px solid var(--line); padding-top:20px; margin-top:12px; }
.student-cadre-group.group-leaders .student-cadre-role-grid { grid-template-columns:minmax(0,1fr); }
.history-rank.rank-silver { --metal:#8197ac; --shine:#eef5ff; --depth:#445a72; --gem:#bddef2; }
@media(max-width:600px) {
 #moralityDialog.is-history { max-height:min(550px,calc(100dvh - 24px)); }
 #moralityDialog.is-history h2,.history-score { font-size:19px; }
 .history-rank { width:50px; height:50px; flex-basis:50px; }
 #moralityDialog.is-history .morality-records { max-height:360px; }
 #moralityDialog .record-detail { gap:5px; }
 #moralityDialog .record-detail p { font-size:14px; }
 #moralityDialog .record-detail time { font-size:10px; }
}

.history-rank.rank-bronze,.history-rank.rank-practice,.history-rank.rank-warning { --metal:#aa7145; --shine:#f3d3a4; --depth:#6c442a; --gem:#d5a36e; }
#moralitySort { width:40px; min-width:40px; padding:8px; }
#moralitySort svg { width:22px; height:22px; }
#moralitySort[aria-pressed="true"],#moralityMultiSelect[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 7%,var(--surface)); }
.morality-selection-dot { position:absolute; z-index:5; right:4px; top:4px; width:23px; height:23px; border:2px solid var(--accent); border-radius:50%; background:var(--surface); color:var(--accent); font-size:16px; }
.morality-card.is-selected .morality-card-detail { outline:2px solid var(--accent); outline-offset:2px; }
.morality-card.is-selectable .morality-card-actions { visibility:hidden; }
#cadreWeeklyDialog[open] { position:fixed; inset:0; display:flex; flex-direction:column; width:min(780px,calc(100vw - 24px)); height:fit-content; max-height:min(720px,calc(100dvh - 32px)); margin:auto; padding:0; overflow:hidden; box-sizing:border-box; }
#cadreWeeklyDialog > header { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:12px 16px; }
#cadreWeeklyDialog h2 { flex:1; font-size:19px; }
#cadreWeeklyDialog .weekly-icon { display:grid; place-items:center; flex:0 0 36px; width:36px; min-width:36px; min-height:36px; height:36px; padding:6px; border:0; border-radius:10px; background:var(--surface-soft); font-size:27px; }
.weekly-icon svg { width:22px; height:22px; }
#cadreWeeklyDialog #cadreWeeklyForm { display:flex; flex-direction:column; overflow:hidden; min-height:0; padding:0 16px 14px; }
#cadreWeeklyDialog .weekly-controls { display:grid; grid-template-columns:110px minmax(0,1fr) minmax(0,1fr) 100px; gap:10px; align-items:end; padding:14px 0; flex-shrink:0; }
#cadreWeeklyDialog .weekly-controls > label { display:grid; gap:6px; min-width:0; font-size:13px; }
#cadreWeeklyDialog .weekly-controls input,#cadreWeeklyDialog .weekly-controls select { width:100%; min-width:0; min-height:42px; padding:6px; font-size:13px; }
#cadreWeeklyDialog .weekly-enable { position:relative; margin:0; }
#cadreWeeklyDialog .weekly-enable input { position:absolute; opacity:0; width:1px; height:1px; min-height:0; }
#cadreWeeklyDialog .weekly-enable span { display:grid; place-items:center; min-height:42px; border:1px solid var(--line); border-radius:9px; cursor:pointer; }
#cadreWeeklyDialog .weekly-enable input:checked + span { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--surface)); }
#cadreWeeklyDialog .weekly-enable input:focus-visible + span { outline:2px solid var(--accent); }
#cadreWeeklyDialog .weekly-scroll { flex:1 1 auto; min-height:0; max-height:440px; overflow-y:auto; overscroll-behavior:contain; padding:0 5px 0 0; }
#cadreWeeklyDialog .weekly-role-row[hidden],#cadreWeeklyDialog section[hidden] { display:none; }
#cadreWeeklyDialog .weekly-role-row { padding:10px 0; }
#cadreWeeklyDialog .weekly-footer { display:grid; grid-template-columns:1fr 1fr; flex-shrink:0; gap:10px; margin:0; padding-top:12px; }
#cadreWeeklyDialog .weekly-footer button { width:100%; min-width:0; }
#weeklySettingsError:empty { display:none; }
@media(max-width:600px) {
 #cadreWeeklyDialog[open] { max-height:calc(100dvh - 24px); }
 #cadreWeeklyDialog .weekly-controls { grid-template-columns:1fr 1fr; gap:8px; }
 #cadreWeeklyDialog .weekly-role-list section { grid-template-columns:minmax(0,1fr); }
 #cadreWeeklyDialog .weekly-scroll { max-height: min(400px,calc(100dvh - 320px)); }
 #cadreWeeklyDialog .weekly-enable { align-self:end; }
 .morality-toolbar { gap:5px; }
}
.class-region-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.class-region-fields label { display:grid; gap:7px; font-size:14px; }
.class-region-fields select { width:100%; min-width:0; min-height:44px; }
.training-hub-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:stretch; }
.training-hub-grid .training-program-card-shell { min-width:0; }
.training-hub-grid .training-program-card { height:100%; box-sizing:border-box; }
.training-help-card { display:flex; flex-direction:column; align-items:stretch; gap:10px; padding:0 20px 20px; min-width:0; overflow:hidden; border:1px solid #cde2de; border-radius:15px; text-align:left; background:linear-gradient(150deg,#f2fbf8,var(--surface)); color:var(--ink); }
.training-help-card .help-cover { display:flex; align-items:center; justify-content:space-between; min-height:130px; margin:0 -20px 6px; padding:14px 20px; background:radial-gradient(ellipse at right top,#9ce6d544,transparent 65%),linear-gradient(130deg,#153d45,#267f79); color:#d7fff1; }
.help-cover svg { width:90px; height:76px; flex:0 0 90px; }
.help-cover > span { font-size:15px; font-weight:500; letter-spacing:1px; }
.training-help-card > strong { font-size:20px; }
.training-help-card > span:not(.help-cover) { font-size:13px; color:var(--muted); line-height:1.6; }
.training-help-card > em { margin-top:auto; font-style:normal; font-size:13px; color:#28766d; }
#trainingHelpDialog { width:min(430px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--ink); box-sizing:border-box; }
#trainingHelpDialog::backdrop { background:#18243380; }
#trainingHelpDialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#trainingHelpDialog h2 { font-size:18px; margin:0; }
#trainingHelpDialog button { min-width:36px; min-height:36px; font-size:24px; border:0; border-radius:50%; }
#trainingHelpDialog img { display:block; width:100%; height:auto; margin-top:12px; }
#trainingHelpDialog p { color:var(--muted); font-size:12px; line-height:1.6; }
@media(max-width:1100px) { .training-hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .training-hub-grid { grid-template-columns:minmax(0,1fr); gap:12px; } }
/* Equal, touch-friendly icon actions. */
#moralityWorkspace .morality-toolbar > button { display:grid; place-items:center; flex:0 0 38px; width:38px; min-width:38px; height:38px; min-height:38px; padding:8px; border-radius:10px; line-height:1; font-size:24px; box-sizing:border-box; }
#moralityWorkspace .morality-toolbar svg { display:block; width:20px; height:20px; margin:0; flex:none; }
#moralityWorkspace .morality-toolbar > button { padding:0; }
.morality-card-actions button { display:grid; place-items:center; }
.morality-card-actions button svg { display:block; width:18px; height:18px; margin:0; }
#cadreWeeklyDialog .weekly-enable { padding:0; align-self:end; }
#cadreWeeklyDialog .weekly-controls input:not([type=checkbox]),#cadreWeeklyDialog .weekly-controls select { height:42px; box-sizing:border-box; }
#cadreWeeklyDialog .weekly-enable span { display:flex; justify-content:center; gap:6px; height:42px; box-sizing:border-box; background:#edf0f4; color:#596273; transition:background .2s,color .2s,box-shadow .2s; }
#cadreWeeklyDialog .weekly-enable span::before { content:'○'; font-size:18px; }
#cadreWeeklyDialog .weekly-enable input:checked + span { background:#127c65; border-color:#127c65; color:white; box-shadow:0 3px 9px #127c6538; }
#cadreWeeklyDialog .weekly-enable input:checked + span::before { content:'✓'; }
@media(max-width:380px) { #moralityWorkspace .morality-toolbar { gap:4px; } #moralityWorkspace .morality-toolbar > button { width:34px; min-width:34px; flex-basis:34px; height:34px; min-height:34px; padding:6px; } }
/* Staggered horizontal/vertical stars travel through the card interior. */
.rank-twinkle { animation:rank-twinkle-light 3.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.rank-travel-star { opacity:0; animation:rank-cross-horizontal 7s linear infinite; filter:drop-shadow(0 0 1.5px var(--gem)); }
.rank-travel-star.is-vertical { animation-name:rank-cross-vertical; }
.rank-star-spin { transform-box:fill-box; transform-origin:center; animation:rank-star-spin 4s linear infinite; }
@keyframes rank-cross-horizontal { 0% { transform:translate(8px,0) scale(.35); opacity:0; } 18% { opacity:.55; } 50% { transform:translate(60px,var(--drift)) scale(.75); opacity:.7; } 82% { opacity:.5; } 100% { transform:translate(112px,0) scale(.35); opacity:0; } }
@keyframes rank-cross-vertical { 0% { transform:translate(0,8px) scale(.35); opacity:0; } 18% { opacity:.5; } 50% { transform:translate(var(--drift),60px) scale(.7); opacity:.65; } 82% { opacity:.45; } 100% { transform:translate(0,112px) scale(.35); opacity:0; } }
@keyframes rank-star-spin { to { transform:rotate(360deg); } }
@keyframes rank-twinkle-light { 0%,100% { opacity:.2; transform:scale(.6); } 50% { opacity:.9; transform:scale(1.15); } }
@media(prefers-reduced-motion:reduce) { .rank-twinkle,.rank-travel-star,.rank-star-spin { animation:none!important; } .rank-travel-star { display:none; } }
.service-feedback-dialog { width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); border:1px solid var(--line); border-radius:16px; padding:20px; background:var(--surface); color:var(--ink); overflow:auto; }
.service-feedback-dialog::backdrop { background:#14232c88; }
.service-feedback-dialog header { display:flex; justify-content:space-between; align-items:center; }
.service-feedback-dialog h2 { font-size:20px; }
.service-feedback-dialog header button { width:36px; height:36px; padding:0; font-size:25px; }
.service-feedback-dialog article { border-top:1px solid var(--line); padding:16px 0; }
.service-feedback-dialog p,.service-feedback-dialog blockquote { white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.6; }
.service-feedback-dialog blockquote { margin:8px 0; padding:12px; background:var(--surface-soft); border-radius:8px; }
.service-feedback-dialog small { color:var(--muted); }

/* Unified class picker and compact learning groups. */
#classSwitchDialog { width:min(560px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); padding:24px; border-radius:22px; box-shadow:0 24px 80px rgb(15 23 42 / 22%); box-sizing:border-box; overscroll-behavior:contain; }
#classSwitchDialog h2 { font-size:21px; letter-spacing:.02em; margin:0 0 6px; }
#classSwitchDialog > p { margin:0 0 18px; line-height:1.6; }
#classSwitchDialog .class-region-fields,#classSwitchDialog #classContextControls { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; padding:0; margin:0; background:none; border:0; }
#classSwitchDialog .class-region-fields label,#classSwitchDialog #classContextControls label,#classSwitchDialog .class-school-field { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; padding:0; min-height:0; min-width:0; border:0; background:none; box-shadow:none; border-radius:0; font-size:13px; font-weight:600; color:var(--muted); }
#classSwitchDialog #classContextControls label > span { padding:0; min-width:0; width:auto; text-align:left; font-size:13px; color:var(--muted); }
#classSwitchDialog .class-school-field { margin:16px 0; }
#classSwitchDialog .class-school-field > span { font-size:13px; }
#classSwitchDialog select,#classSwitchDialog .class-school-field input { width:100%; height:46px; min-height:46px; padding:0 12px; margin:0; box-sizing:border-box; text-align:left; text-align-last:left; border:1px solid var(--line); border-radius:11px; background:var(--surface); box-shadow:none; color:var(--ink); font-size:15px; font-weight:600; }
#classSwitchDialog select:focus-visible,#classSwitchDialog input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#classSwitchDialog #classContextControls label:first-child { grid-column:auto; }
#classSwitchDialog #classContextControls label:last-child { grid-column:1/-1; }
#classSwitchDialog #classSwitchError:empty { display:none; }
#classSwitchDialog footer { position:sticky; bottom:-24px; background:var(--surface); padding:16px 0 0; margin-top:8px; gap:12px; }
#classSwitchDialog footer button { border-radius:11px; }
#studyGroupsWorkspace .study-groups-toolbar { grid-template-columns:minmax(0,1fr) auto; min-height:64px; gap:10px; }
#studyGroupsWorkspace .study-group-toolbar-actions { grid-column:2; grid-row:1; display:flex; flex-wrap:nowrap; width:auto; gap:8px; }
#studyGroupsWorkspace .study-group-toolbar-actions > button,#studyGroupsWorkspace .study-group-export-control,#studyGroupsWorkspace #studyGroupExportBtn { width:auto; min-width:0; }
#studyGroupsWorkspace #studyGroupDocumentTitle { font-size:18px; line-height:1.35; }
#studyGroupsWorkspace .study-groups-title { gap:8px; }
#studyGroupsWorkspace .study-groups-title-icon { width:30px; height:30px; flex-basis:30px; border:0; background:none; }
#studyGroupsWorkspace .study-group-board { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.study-group-adjust-card { display:grid; grid-template-rows:1fr 1fr; min-height:210px; min-width:0; border:1.5px dashed color-mix(in srgb,var(--muted) 40%,transparent); border-radius:14px; background:color-mix(in srgb,var(--surface) 45%,transparent); backdrop-filter:blur(12px); overflow:hidden; }
.study-group-adjust-card button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; width:100%; min-height:90px; border:0; border-radius:0; background:transparent; box-shadow:none; color:var(--muted); }
.study-group-adjust-card button + button { border-top:1px dashed var(--line); }
.study-group-adjust-card button:not(:disabled):hover { background:color-mix(in srgb,var(--accent) 7%,transparent); color:var(--accent); }
.study-group-adjust-card .ui-icon { width:26px; height:26px; }
.study-group-adjust-card small { font-size:12px; }
#studyGroupsWorkspace .study-group-card { border-radius:14px; }
@media(max-width:760px) {
 #classSwitchDialog { padding:20px; border-radius:20px; }
 #classSwitchDialog h2 { font-size:20px; }
 #classSwitchDialog > p { font-size:12px; margin-bottom:16px; }
 #classSwitchDialog .class-region-fields,#classSwitchDialog #classContextControls { gap:12px; }
 #classSwitchDialog select,#classSwitchDialog .class-school-field input { font-size:16px; height:44px; min-height:44px; }
 #classSwitchDialog footer { bottom:-20px; }
 #studyGroupsWorkspace .study-groups-toolbar { padding:10px; }
 #studyGroupsWorkspace .study-group-board { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:10px 0; }
 #studyGroupsWorkspace .study-groups-title-icon { display:none; }
 #studyGroupsWorkspace #studyGroupDocumentTitle { font-size:18px; }
 #studyGroupsWorkspace .workspace-inline-title-editor { gap:2px; flex-wrap:nowrap; }
 #studyGroupsWorkspace .workspace-title-edit-button { width:24px; min-width:24px; padding:3px; }
 #studyGroupsWorkspace .study-group-toolbar-actions { gap:6px; }
 #studyGroupsWorkspace .study-group-toolbar-actions button { padding:7px 9px; min-height:36px; font-size:12px; white-space:nowrap; }
 #studyGroupsWorkspace .study-group-card { min-height:180px; }
 #studyGroupsWorkspace .study-group-card > header { min-height:44px; justify-content:space-between; padding:0 10px; }
 #studyGroupsWorkspace .study-group-card > header p { position:static; }
 #studyGroupsWorkspace .study-group-members { min-height:136px; padding:7px; gap:5px; }
 #studyGroupsWorkspace .study-group-member { grid-template-columns:20px minmax(0,1fr) 24px; min-height:36px; }
 #studyGroupsWorkspace .study-group-member > strong { padding:0 3px; font-size:13px; white-space:normal; }
 #studyGroupsWorkspace .study-group-member-name { overflow-wrap:anywhere; }
 #studyGroupsWorkspace .study-group-add-student { font-size:12px; min-height:36px; }
 .study-group-adjust-card { min-height:180px; }
}
@media(min-width:540px) and (max-width:760px) { #studyGroupsWorkspace .study-group-board { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:360px) { #studyGroupsWorkspace #studyGroupDocumentTitle { font-size:16px; } #studyGroupsWorkspace .study-group-toolbar-actions button { padding:7px; } }
#classSwitchDialog #classContextControls label > span { justify-content:flex-start; }
#classSwitchDialog #classContextControls label { text-align:left; backdrop-filter:none; }

/* Compact roster, cadre and hygiene headers. */
#homeWorkspace .home-student-directory-head { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"title actions" "summary summary"; align-items:center; gap:4px 10px; min-height:0; padding:10px 12px; }
#homeWorkspace .home-student-directory-title { grid-area:title; display:flex; align-items:center; gap:7px; }
#homeWorkspace .roster-count-note { grid-area:summary; display:block; margin:0; padding:0; color:var(--muted); font-size:12px; font-weight:400; line-height:1.4; white-space:normal; }
#homeWorkspace .home-student-directory-actions { grid-area:actions; display:flex; flex-wrap:nowrap; width:auto; gap:7px; margin:0; padding:0; border:0; justify-content:flex-end; }
#homeWorkspace .home-student-directory-actions button { min-width:0; width:auto; margin:0; }
#studentWorkspace .student-cadre-toolbar,#hygieneWorkspace .student-hygiene-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"title actions"; min-height:0; align-items:center; gap:8px; padding:10px 12px; }
#studentWorkspace .student-cadre-toolbar-title,#hygieneWorkspace .student-hygiene-heading { grid-area:title; min-width:0; gap:7px; }
#studentWorkspace .student-cadre-toolbar-actions,#hygieneWorkspace .student-hygiene-toolbar-actions { grid-area:actions; display:flex; flex-wrap:nowrap; justify-content:flex-end; justify-self:end; width:auto; gap:7px; }
#studentWorkspace .workspace-inline-title-editor,#hygieneWorkspace .workspace-inline-title-editor { min-width:0; flex-wrap:nowrap; gap:3px; }
#studentWorkspace .student-cadre-toolbar h2,#hygieneWorkspace .student-hygiene-toolbar h2 { min-width:0; margin:0; font-size:17px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#studentWorkspace .student-cadre-toolbar-actions .workspace-head-action,#hygieneWorkspace .student-hygiene-toolbar-actions .workspace-head-action { width:auto; min-width:0; white-space:nowrap; }
@media(max-width:760px) {
 #homeWorkspace .home-student-directory-head { padding:8px 10px; gap:4px 8px; }
 #homeWorkspace .home-student-directory-title h3 { font-size:17px; line-height:1.3; }
 #homeWorkspace .home-student-directory-actions { gap:5px; }
 #homeWorkspace .home-student-directory-actions button { padding:6px 8px; min-height:34px; font-size:12px; gap:4px; }
 #homeWorkspace .home-student-directory-actions button .ui-icon { width:13px; height:13px; }
 #studentWorkspace .student-cadre-toolbar,#hygieneWorkspace .student-hygiene-toolbar { padding:8px 10px; gap:7px; }
 #studentWorkspace .student-cadre-toolbar-actions,#hygieneWorkspace .student-hygiene-toolbar-actions { gap:5px; }
 #studentWorkspace .student-cadre-toolbar-actions .workspace-head-action,#hygieneWorkspace .student-hygiene-toolbar-actions .workspace-head-action { min-height:34px; padding:6px 9px; font-size:12px; gap:4px; }
 #studentWorkspace .student-cadre-toolbar .workspace-title-edit-button,#hygieneWorkspace .student-hygiene-toolbar .workspace-title-edit-button { width:22px; min-width:22px; min-height:30px; padding:3px; }
 #studentWorkspace .student-cadre-toolbar .student-manager-section-icon,#hygieneWorkspace .student-hygiene-toolbar .student-manager-section-icon,#homeWorkspace .home-student-directory-title .student-manager-section-icon { width:20px; height:24px; min-width:20px; flex-basis:20px; border:0; padding:0; background:none; }
 #studentWorkspace .student-cadre-board { padding-top:8px; }
 #hygieneWorkspace .student-hygiene-board { padding-top:8px; }
}
@media(max-width:360px) { #homeWorkspace .home-student-directory-actions button { padding-inline:6px; } #studentWorkspace .student-cadre-toolbar-title,#hygieneWorkspace .student-hygiene-heading { gap:4px; } }
#homeWorkspace .home-student-directory-title { flex-wrap:nowrap; }
@media(max-width:360px) { #homeWorkspace .home-student-directory-title .student-manager-section-icon { display:none; } }

/* Group leaders span both desktop columns after subject representatives. */
#studentCadreBoard > .group-leaders { grid-column:1/-1; border-left:0; padding-left:0; }
#studentCadreBoard .group-leaders .student-cadre-role-picker { grid-template-columns:160px minmax(0,1fr); min-height:56px; }
#studentCadreBoard .group-leaders .cadre-name-grid { gap:6px 10px; }
#studentCadreBoard .group-leaders .cadre-name-grid > span { flex:0 1 calc(12.5% - 9px); min-width:3.5em; }
#studentCadreBoard .group-leaders .cadre-name-grid > span:only-child { flex:0 1 auto; }
/* Seat number and name stay together in a compact selection tile. */
#studentSelectionPanel .student-selection-dialog { width:min(1240px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); box-sizing:border-box; border-radius:16px; padding:18px; }
#studentSelectionList { grid-template-columns:repeat(10,minmax(0,1fr)); gap:7px; grid-auto-rows:minmax(44px,auto); padding:10px 0; }
#studentSelectionList .student-selection-option { grid-template-columns:13px auto minmax(0,1fr); grid-template-areas:"check seat name"; gap:4px; padding:7px 5px; min-height:44px; box-sizing:border-box; border-radius:8px; }
#studentSelectionList .student-selection-option input { width:13px; height:13px; }
#studentSelectionList .student-selection-seat { font-size:11px; font-variant-numeric:tabular-nums; }
#studentSelectionList .student-selection-option strong { font-size:13px; line-height:1.4; overflow:visible; white-space:normal; overflow-wrap:anywhere; text-overflow:clip; }
#studentSelectionList .student-selection-option:focus-within { outline:2px solid var(--accent); outline-offset:1px; }

@media(max-width:760px) {
 #studentCadreBoard .group-leaders .student-cadre-role-picker { grid-template-columns:100px minmax(0,1fr); }
 #studentCadreBoard .group-leaders .cadre-name-grid > span { flex:0 1 auto; min-width:3em; font-size:13px; }
 #studentSelectionPanel .student-selection-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 20px); padding:12px; grid-template-rows:auto auto minmax(0,1fr) auto; }
 #studentSelectionPanel .student-selection-head { margin-bottom:8px; }
 #studentSelectionPanel .student-selection-head h2 { font-size:18px; }
 #studentSelectionPanel .student-selection-head p { font-size:11px; line-height:1.4; }
 #studentSelectionList { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
 #studentSelectionList .student-selection-option { gap:3px; padding:6px 4px; }
 #studentSelectionList .student-selection-option strong { font-size:12px; }
}
@media(min-width:540px) and (max-width:760px) { #studentSelectionList { grid-template-columns:repeat(5,minmax(0,1fr)); } }
#studentSelectionPanel { grid-template-columns:minmax(0,1fr); }
#studentSelectionPanel .student-selection-dialog { min-width:0; justify-self:center; }
@media(max-width:760px) { #studentSelectionPanel { padding:10px 8px; } #studentSelectionPanel .student-selection-dialog { width:100%; } }
/* Training service preview and compact seat details, 2026-09-20. */
#studentDetailsPanel .student-details-heading { width:100%; display:flex; flex-wrap:nowrap; align-items:center; gap:8px; }
#studentDetailsPanel .student-details-heading h2 { margin:0; flex:1; }
#studentDetailsPanel .student-detail-actions { margin-left:auto; flex:none; }
.training-hub-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,285px),1fr)); gap:14px; }
.training-hub-grid .training-program-card { grid-template-columns:32px minmax(0,1fr); padding:18px 14px; gap:10px; border-radius:12px; min-height:220px; }
.training-hub-grid .training-program-card-body { min-height:0; }
.training-hub-grid .training-program-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.training-hub-grid .training-program-card-top strong { display:block; overflow:visible; font-size:19px; line-height:1.4; min-width:0; overflow-wrap:anywhere; }
.training-hub-grid .training-program-card-top small { flex:none; max-width:40%; white-space:normal; font-size:12px; line-height:1.5; margin-top:3px; }
.training-hub-grid .training-program-source { font-size:13px; line-height:1.5; margin-top:8px; }
.training-hub-grid .training-program-description { font-size:14px; line-height:1.65; -webkit-line-clamp:3; }
.training-hub-grid .training-program-footer { font-size:12px; padding-top:12px; }
.training-hub-grid .training-help-card { border-radius:12px; gap:8px; padding-bottom:16px; }
.training-hub-grid .help-cover { min-height:84px; padding-block:8px; }
.training-hub-grid .help-cover svg { width:64px; height:60px; flex-basis:64px; }
.training-hub-grid .help-cover > span { font-size:13px; letter-spacing:0; }
#trainingHelpDialog { width:min(560px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:20px; }
#trainingHelpDialog header { align-items:flex-start; }
#trainingHelpDialog header p { margin:8px 0 0; }
#trainingHelpDialog .training-help-close { flex:none; padding:0; }
#trainingHelpDialog form { display:grid; gap:16px; margin-top:18px; }
#trainingHelpDialog label { display:grid; gap:7px; font-size:14px; font-weight:600; margin:0; }
#trainingHelpDialog input { width:100%; min-width:0; min-height:44px; box-sizing:border-box; font-size:15px; }
#trainingHelpDialog .training-help-notice { padding:12px; background:var(--surface-soft,#f3f5f8); border:1px solid var(--line,#d8dfe8); border-radius:8px; font-size:13px; line-height:1.6; }
#trainingHelpDialog .training-help-account { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#trainingHelpDialog footer { display:grid; gap:12px; font-size:12px; color:var(--muted); }
#trainingHelpDialog button[type=submit] { border-radius:8px; font-size:15px; padding:10px; opacity:.6; cursor:not-allowed; }
@media(max-width:600px) {
 .training-hub-grid { grid-template-columns:1fr; gap:10px; }
 .training-hub-grid .training-program-card { min-height:0; padding:14px; }
 .training-hub-grid .training-program-card-top strong { font-size:18px; }
 #trainingHelpDialog { padding:16px; }
 #trainingHelpDialog .training-help-account { grid-template-columns:1fr; }
}
/* Quiet clickable hygiene cells; compact mobile duty and cadre boards. */
#studentHygieneBoard .student-hygiene-select { grid-template-columns:minmax(0,1fr); border-style:dashed; text-align:center; }
@media(max-width:760px) {
 #studentCadreBoard { grid-template-columns:minmax(0,1fr); padding:8px; gap:14px; }
 #studentCadreBoard > .student-cadre-group { padding-left:0; border-left:0; }
 #studentCadreBoard > .student-cadre-group + .student-cadre-group { border-top:1px solid var(--line); padding-top:12px; }
 #studentCadreBoard .student-cadre-role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
 #studentCadreBoard .student-cadre-role-picker { grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:3px; padding:5px; }
 #studentCadreBoard .student-cadre-role-label { min-height:30px; }
 #studentCadreBoard .student-cadre-role-name-input { font-size:13px; padding-block:3px; }
 #studentCadreBoard .student-cadre-select { width:100%; min-width:0; padding:5px; font-size:13px; }
 #studentCadreBoard .cadre-name-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 6px; }
 #studentCadreBoard .cadre-name-grid > span { flex:0 1 auto; min-width:3em; white-space:normal; overflow-wrap:anywhere; font-size:13px; }
 #studentCadreBoard .group-leaders .student-cadre-role-picker { grid-template-columns:minmax(0,1fr); }
 #hygieneWorkspace .student-hygiene-board { padding:6px 2px; }
 #hygieneWorkspace .student-hygiene-grid-scroll::before { display:none; }
 #hygieneWorkspace .student-hygiene-grid { min-width:calc(62px + var(--hygiene-area-count) * 54px); grid-template-columns:38px repeat(var(--hygiene-area-count),minmax(54px,1fr)) 24px; }
 #hygieneWorkspace .student-hygiene-cell { padding:3px; }
 #hygieneWorkspace .student-hygiene-select { min-height:44px; padding:4px 1px; gap:0; }
 #hygieneWorkspace .student-hygiene-selected-names { padding:0; gap:3px; font-size:12px; }
 #hygieneWorkspace .student-hygiene-area-head { padding:5px 2px; min-height:40px; }
 #hygieneWorkspace .student-hygiene-area-label { font-size:12px; overflow-wrap:anywhere; }
 #hygieneWorkspace .student-hygiene-day { padding:5px 1px; font-size:12px; }
 #hygieneWorkspace .student-hygiene-corner { min-height:40px; font-size:10px; }
 #hygieneWorkspace .student-hygiene-add-area { min-width:0; padding:2px; }
 #hygieneWorkspace .student-hygiene-add-area span { display:none; }
 #hygieneWorkspace .student-hygiene-add-area .ui-icon { width:16px; height:16px; }
}
@media(max-width:760px) {
 #hygieneWorkspace .student-hygiene-grid { min-width:calc(52px + var(--hygiene-area-count) * 46px); grid-template-columns:32px repeat(var(--hygiene-area-count),minmax(46px,1fr)) 20px; }
 #hygieneWorkspace .student-hygiene-day,#hygieneWorkspace .student-hygiene-cell { min-height:52px; }
}
/* Keep role and student names side by side, including mobile. */
#studentCadreBoard .student-cadre-select { grid-template-columns:minmax(0,1fr); }
@media(max-width:760px) {
 #studentCadreBoard .student-cadre-role-picker,
 #studentCadreBoard .group-leaders .student-cadre-role-picker { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:3px; padding:4px; min-height:48px; }
 #studentCadreBoard .student-cadre-role-label.has-subject-icon { display:block; padding:0; min-height:0; }
 #studentCadreBoard .student-cadre-subject-icon { display:none; }
 #studentCadreBoard .student-cadre-role-name-input { font-size:12px; padding:4px 0; height:34px; }
 #studentCadreBoard .student-cadre-select { padding:4px 2px; min-height:38px; align-self:stretch; }
 #studentCadreBoard .cadre-name-grid { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
 #studentCadreBoard .cadre-name-grid > span,
 #studentCadreBoard .group-leaders .cadre-name-grid > span { flex:none; width:100%; min-width:0; font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
}
@media(max-width:760px) {
 #studentCadreBoard .student-cadre-role-label.has-subject-icon { height:auto; align-self:center; }
}