/* A teacher's saved classes use the same quiet, clear finish as the classroom. */
.modal:has(.account-library) { max-width: 940px; }
.modal:has(.account-login-layout) { max-width: 820px; }
.modal:has(.teacher-account-panel) { color: #243d35; background: #fff; border-color: #dfe6dd; }
.modal:has(.teacher-account-panel) > .panel-title h2 { font: 800 1.5rem/1.35 var(--ui-font,system-ui),sans-serif; margin: 0; }
.teacher-account-panel { font-family: var(--ui-font,system-ui),sans-serif; font-size: calc(16px * var(--reading-scale,1)); }
.teacher-account-panel :is(button,summary) { font-weight: 700; }
.teacher-account-panel button { border-radius: 12px; box-shadow: none; border: 1px solid #dfe6dd; color: #243d35; transition: background .12s, border-color .12s; }
.teacher-account-panel .primary { background: #d2eb67; border-color: #bfd456; color: #243d35; box-shadow: none; }
.teacher-account-panel .secondary { background: #f8f9f5; border-color: #d6ded2; color: #243d35; box-shadow: none; }
.teacher-account-panel .ghost { background: white; border-color: #dfe6dd; box-shadow: none; }
.teacher-account-panel button:not(:disabled):hover { border-color: #80927e; }
.teacher-account-panel button:disabled { opacity: .65; }
.teacher-account-panel :is(button,input,summary,output):focus-visible { outline: 3px solid #243d35; outline-offset: 3px; }
.teacher-account-panel .input { min-height: 50px; border-radius: 12px; border: 1px solid #bfcabd; background: #fbfcf9; color: #243d35; }
.account-eyebrow { font-size: .78em; color: #53654c; letter-spacing: -.015em; font-weight: 750; }
.account-login-layout { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.15fr); gap: 28px; align-items: start; margin-top: 12px; }
.account-login-story { min-width: 0; padding: 20px; display: grid; gap: 16px; border-radius: 20px; background: #f0f5df; overflow: hidden; }
.account-login-story img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: contain; margin: -4px 0; }
.account-login-story > b { font-size: 1.4em; line-height: 1.3; letter-spacing: -.04em; }
.account-login-story p { color: #4c6153; font-size: .88em; line-height: 1.75; }
.account-login-note { padding-top: 14px; border-top: 1px solid #d0d9bd; color: #4c6153; font-size: .78em; }
.account-password-hint { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; color: #526458; }
.account-password-hint small { font-size: .78em; }
.teacher-account-panel .account-password-hint button { min-height: 36px; padding: 4px 8px; font-size: .78em; border: 0; background: transparent; }
.account-login-links { display: grid; gap: 8px; padding-top: 8px; }
.account-library { display: grid; gap: 18px; min-width: 0; }
.account-library-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.account-library .account-heading { margin: 6px 0 0; gap: 10px; justify-content: flex-start; flex-wrap: wrap; }
.account-library .account-heading b { font-size: 1.2em; line-height: 1.3; }
.account-library .account-heading span { font-size: .82em; color: #526458; }
.account-library-heading > button { font-size: .85em; padding: 10px 14px; }
.account-library .account-storage { margin: 0; background: #f4f7ee; border: 1px solid #dce5cd; padding: 10px 14px; border-radius: 12px; font-size: .84em; color: #40553e; }
.account-library .account-storage > span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #dceac3; font-weight: 800; margin-right: 6px; }
.account-library .account-storage.account-warning { background: #fff4d6; border-color: #d4aa55; color: #5d441e; }
.account-current-room { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 18px; border: 1px solid #d4dfb9; border-radius: 16px; background: #f0f6dc; }
.account-current-room > div { display: grid; gap: 4px; flex: 1 1 220px; min-width: 0; }
.account-current-room b { font-size: 1em; }
.account-current-room p, .account-current-room small { font-size: .82em; color: #506244; }
.account-current-room button { padding: 12px 16px; }
.account-library-tools { display: grid; gap: 14px; min-width: 0; }
.account-room-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; background: #f3f5f0; border-radius: 14px; width: fit-content; max-width: 100%; }
.account-room-filters .ghost { border: 1px solid transparent; background: transparent; padding: 8px 13px; min-height: 42px; font-size: .85em; }
.account-room-filters .ghost[aria-pressed=true] { background: #fff; border-color: #c9d5c3; box-shadow: 0 2px 5px #243d3509; color: #243d35; }
.account-room-search { display: flex!important; flex-direction: row; align-items: center; gap: 12px; }
.account-room-search span { font-size: .85em; white-space: nowrap; }
.account-room-search .input { flex: 1; }
.account-library .account-room-count { color: #526458; font-size: .82em; margin: -6px 0 -8px; }
.account-library .account-classrooms { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; max-height: none; overflow: visible; margin: 0; }
.account-room-card { display: grid; gap: 7px; min-width: 0; padding: 18px; border: 1px solid #dfe6dd; background: white; border-radius: 18px; box-shadow: 0 2px 6px #243d3505; }
.account-room-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.account-room-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; font: 800 1.15em/1 var(--ui-font,system-ui),sans-serif; background: #daedf6; color: #385868; }
.account-room-mark.mark-1 { background: #f4dce7; color: #694258; }
.account-room-mark.mark-2 { background: #f9edb3; color: #635422; }
.account-room-status { font-size: .72em; color: #506244; background: #f3f5ed; padding: 5px 8px; border-radius: 8px; }
.account-room-card > b { font-size: 1.1em; letter-spacing: -.035em; overflow-wrap: anywhere; }
.account-room-card > small { color: #526458; font-size: .8em; }
.account-room-footer { display: flex; align-items: start; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.account-classrooms .account-room-footer > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: auto; flex: 1; min-width: 130px; padding: 10px 14px; background: #f8f9f5; border: 1px solid #d6ded2; font-size: .9em; }
.account-classrooms .account-room-footer > button > span { color: inherit; }
.account-room-more { flex: 0 1 88px; min-width: 72px; }
.account-room-more summary { cursor: pointer; text-align: center; padding: 10px 7px; border: 1px solid #dfe6dd; border-radius: 12px; min-height: 48px; line-height: 1.7; font-size: .85em; }
.account-classrooms .account-room-more button { background: white; padding: 8px; min-height: 44px; font-size: .78em; width: 100%; margin-top: 7px; }
.account-room-preview { padding: 16px; border: 1px solid #dfe6dd; background: #f8f9f5; border-radius: 14px; display: grid; gap: 5px; overflow-wrap: anywhere; }
.account-room-preview small { color: #526458; }
.account-library-empty, .account-no-results { grid-column: 1 / -1; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 24px; border: 1px dashed #c5d1bd; background: #fbfcf9; border-radius: 20px; }
.account-library-empty img { width: 190px; height: 127px; object-fit: contain; margin: -6px 0; }
.account-library-empty > b { font-size: 1.25em; letter-spacing: -.035em; }
.account-library-empty p,.account-no-results p { max-width: 430px; color: #526458; font-size: .9em; }
.account-library-empty ol { display: flex; justify-content: center; flex-wrap: wrap; gap: 24px; margin: 4px 0; padding-left: 20px; color: #4c6153; font-size: .8em; }
.account-library-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid #dfe6dd; }
.account-library-bottom p { flex: 1; min-width: 200px; font-size: .8em; color: #526458; }
.account-library .account-settings { margin: 0; border-top: 1px solid #dfe6dd; }
.account-library .account-settings form { max-width: 440px; }
.account-security-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.account-library .account-signout { justify-self: start; padding: 8px 12px; font-size: .82em; border: 0; color: #526458; }
html[data-color-mode=contrast] .modal:has(.teacher-account-panel) { color: #111; background: #fff; border: 2px solid #111; }
html[data-color-mode=contrast] .teacher-account-panel :is(.account-login-story,.account-login-note,.account-storage,.account-current-room,.account-room-card,.account-room-mark,.account-room-status,.account-library-empty,.account-room-preview,.account-room-filters,.account-no-results,button,input) { background: #fff; color: #111; border-color: #111; }
html[data-color-mode=contrast] .teacher-account-panel :is(p,small,b,span,summary) { color: #111; }
html[data-color-mode=contrast] .account-room-filters .ghost[aria-pressed=true] { outline: 2px solid #111; outline-offset: -3px; font-weight: 900; }
html[data-color-mode=contrast] .teacher-account-panel :is(button,input,summary,output):focus-visible { outline-color: #111; }
html[data-reduced-motion=true] .teacher-account-panel button { transition: none; transform: none; }
@media (max-width:700px) {
 .account-login-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
 .account-login-story { grid-template-columns: minmax(0,1fr) 88px; gap: 8px 12px; padding: 16px; }
 .account-login-story img { grid-column: 2; grid-row: 1 / 4; width: 88px; height: 100%; object-fit: contain; }
 .account-login-story > b { font-size: 1.15em; }
 .account-login-story > b br { display: none; }
 .account-login-story p { font-size: .82em; }
 .account-login-note { display: none; }
 .account-library .account-classrooms { grid-template-columns: minmax(0,1fr); }
 .account-current-room { padding: 14px; }
 .account-current-room button { width: 100%; }
 .account-room-filters { width: 100%; }
 .account-room-filters .ghost { flex: 1 1 40%; }
 .account-room-search { align-items: stretch; flex-direction: column; }
 .account-library-empty { padding: 20px 14px; }
 .account-security-actions > button { width: 100%; }
}
/* Search and folders share one desktop row so opening a class stays in view. */
@media (min-width:701px) {
 .account-library { gap: 14px; }
 .account-library-heading .account-eyebrow { display: none; }
 .account-library .account-heading { margin: 0; }
 .account-library .account-storage { padding: 8px 12px; }
 .account-current-room { padding: 12px 16px; }
 .account-current-room > div { gap: 2px; }
 .account-current-room small { display: inline; }
 .account-library-tools { grid-template-columns: auto minmax(160px,1fr); align-items: center; gap: 12px; }
 .account-room-search { position: relative; }
 .account-room-search > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 .account-room-filters .ghost { padding: 7px 10px; min-height: 42px; }
 .account-room-card { padding: 16px; gap: 5px; }
 .account-room-top { margin-bottom: 4px; }
 .account-room-footer { margin-top: 8px; }
 .account-room-status { max-width: 160px; }
}
/* Earlier app-wide field paint must also honor this screen's contrast setting. */
.teacher-account-panel .input { background: #fbfcf9!important; color: #243d35!important; border-color: #bfcabd!important; }
html[data-color-mode=contrast] .teacher-account-panel :is(button,input,output) { background: #fff!important; color: #111!important; border-color: #111!important; }
html[data-color-mode=contrast] .teacher-account-panel .primary { background: #111!important; color: #fff!important; border-color: #111!important; }