/* Stage 2 is scoped to its own screens; Main Menu styles remain unchanged. */
.academy[hidden],.classroom-app[hidden],.classroom-app [hidden]{display:none!important}
.classroom-app{min-height:100svh;padding:75px 28px 40px;background:linear-gradient(#fff8e978,#fff5e58c),url('assets/vietnam-schoolyard.png') center top/cover fixed;color:#603d50}
.workspace-top,.workspace-shell{width:min(1040px,100%);margin:0 auto}
.workspace-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}
.workspace-brand{font-size:13px;font-weight:bold;letter-spacing:.4px}
.workspace-top nav{display:flex;gap:10px}
.classroom-app button{font-family:inherit}
.classroom-app button:disabled{opacity:.6;cursor:wait}
.classroom-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;border:2px solid #fff;border-radius:14px;padding:11px 20px;font-size:14px;font-weight:bold;color:#603d50;background:#f8d2bf;box-shadow:0 3px 0 #d7ab9c;transition:transform .18s,filter .18s}
.classroom-button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.03)}
.classroom-button:active:not(:disabled){transform:translateY(2px)}
.classroom-button.secondary{background:#fff9ef;box-shadow:0 3px 0 #dacebd}
.classroom-button.mint{background:#dce8d2;box-shadow:0 3px 0 #afc3a4}
.classroom-button.lavender{background:#e6d8ed;box-shadow:0 3px 0 #c5afcf}
.demo-notice{display:flex;align-items:center;gap:12px;border:1px solid #e6d6b8;background:#fff8e9d9;border-radius:16px;padding:14px 20px;margin-bottom:18px;font-size:12px;line-height:1.6;color:#836858}
.demo-notice strong{display:block;color:#775748;font-size:13px}
.demo-notice>span{font-size:26px;color:#c29a79}
.storage-notice{padding:12px 18px;border-radius:12px;background:#ffebcf;font-size:12px;line-height:1.6;color:#755641}
.classroom-screen{animation:classroom-enter .22s ease-out}
@keyframes classroom-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.workspace-card{background:#fffcf5f5;border:2px solid #fff;border-radius:28px;padding:32px;box-shadow:0 5px 0 #d5b99638,0 12px 36px #634b3a10}
.classroom-app h1{font-size:30px;letter-spacing:-.8px;text-align:left;margin:10px 0 12px;overflow-wrap:anywhere}
.classroom-app h1:focus{outline:none}
.classroom-app h2{font-size:19px;margin:0 0 12px}
.workspace-eyebrow{font-size:10px;font-weight:bold;letter-spacing:1.6px;color:#a08174;margin:0}
.workspace-description{overflow-wrap:anywhere;font-size:14px;color:#95786e;line-height:1.7;margin:0 0 28px}
.create-layout,.student-form-layout{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
.classroom-form{display:grid;gap:18px}
.classroom-form .field{display:grid;gap:8px}
.classroom-form label{font-size:14px;font-weight:bold}
.classroom-form input{width:100%;min-width:0;border:2px solid #eaded4;border-radius:13px;background:#fffdfa;padding:13px 14px;font:inherit;color:#603d50;outline-offset:3px}
.classroom-form input:focus-visible{outline:3px solid #b99bc3;border-color:transparent}
.classroom-form input[aria-invalid="true"]{border-color:#bc6d76}
.field-hint{font-size:11px;line-height:1.6;color:#998076;margin:0}
.field-error,.form-error{font-size:12px;line-height:1.6;color:#a34e60;margin:0}
.field-error:empty,.form-error:empty{display:none}
.form-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:7px}
.form-actions .classroom-button{flex:1}
.ellie-welcome{text-align:center;background:#f4eddf80;border-radius:24px;padding:18px}
.ellie-welcome img{width:min(100%,230px);height:auto;display:block;margin:auto}
.ellie-welcome p{font-size:16px;font-weight:bold;line-height:1.5;margin:10px 0}
.ellie-welcome small{font-size:12px;color:#9a7c72;line-height:1.7}
.screen-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}
.screen-heading .workspace-description{margin-bottom:0}
.classroom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));gap:18px}
.classroom-tile{width:100%;text-align:left;background:#fff9ed;border:2px solid #fff;border-radius:22px;padding:23px;color:#603d50;box-shadow:0 4px 0 #e4d6bf;transition:transform .18s}
.classroom-tile:nth-child(3n+2){background:#eff3e6;box-shadow:0 4px 0 #cfdabb}
.classroom-tile:nth-child(3n){background:#f0e8f4;box-shadow:0 4px 0 #d7c7df}
.classroom-tile:hover{transform:translateY(-3px)}
.tile-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:#fff9;font-size:24px;margin-bottom:20px}
.tile-name{display:block;font-size:19px;font-weight:bold;overflow-wrap:anywhere}
.tile-count{display:block;font-size:12px;margin-top:9px;color:#9c7b6f}
.tile-open{display:block;margin-top:22px;font-size:11px;font-weight:bold;color:#936a83}
.empty-classroom{text-align:center;padding:45px 20px;background:#f7f0e680;border:1px dashed #dfcdbd;border-radius:23px}
.empty-icon{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 20px;background:#f4e0d2;border-radius:22px;font-size:32px;color:#a27676}
.empty-classroom h2{font-size:20px}
.empty-classroom p{font-size:13px;line-height:1.7;color:#9a7b70;margin:10px 0 22px}
.student-count{display:inline-block;margin-top:5px;padding:6px 12px;background:#f0e6f2;border-radius:20px;color:#9a748e;font-size:11px}
.student-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:15px;list-style:none;margin:0;padding:0}
.student-card{width:100%;height:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .18s,box-shadow .18s;display:flex;align-items:center;gap:14px;padding:18px;background:#fff8ed;border:1px solid #eadfce;border-radius:18px;min-width:0}
.student-avatar{display:grid;place-items:center;flex:0 0 43px;height:43px;border-radius:15px;background:#e6d8ed;color:#916d99;font-size:15px;font-weight:bold}
.student-item:nth-child(3n+2) .student-avatar{background:#dce8d2;color:#778b68}
.student-item:nth-child(3n) .student-avatar{background:#f8d9c7;color:#b18170}
.student-card strong{display:block;font-size:15px;overflow-wrap:anywhere}
.student-card small{display:block;color:#9d7c72;font-size:12px;margin-top:7px;overflow-wrap:anywhere}
.student-summary{padding:25px;background:#f2eaf5;border-radius:23px;align-self:start}
.student-summary h2{font-size:18px;overflow-wrap:anywhere}
.student-summary p,.student-summary li{font-size:12px;color:#907487;line-height:1.8}
.student-summary ul{padding-left:18px;margin-bottom:0}
.success-card{max-width:680px;margin:auto}
.success-heading{text-align:center;margin-bottom:25px}
.success-heading h1{text-align:center}
.success-icon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 18px;border-radius:22px;background:#dce8d2;font-size:30px;color:#7e956c}
.success-heading p{font-size:13px;color:#987d71;line-height:1.7}
.credentials{padding:22px 24px;background:#faf0dc;border:1px solid #e9d8b7;border-radius:18px;user-select:text}
.credentials dl{margin:0;display:grid;gap:16px}
.credentials dt{font-size:11px;color:#9c8067;margin-bottom:6px}
.credentials dd{margin:0;font-size:17px;overflow-wrap:anywhere}
.credentials code{font:inherit;font-family:ui-monospace,monospace;font-size:17px}
.credentials .demo-credential-note{font-size:11px;color:#8c6d58;line-height:1.7;margin:18px 0 0;border-top:1px solid #e6d6b8;padding-top:13px}
.copy-row{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin:18px 0 26px}
.copy-row p{font-size:12px;line-height:1.6;color:#93756f;flex:1;margin:0;min-width:150px}
@media(max-width:760px){.classroom-app{padding:68px 16px 28px;background-attachment:scroll}.workspace-top{align-items:flex-start;gap:12px;flex-direction:column;margin-bottom:18px}.workspace-top nav{width:100%;justify-content:space-between}.workspace-brand{font-size:11px}.workspace-card{padding:23px 20px;border-radius:23px}.create-layout,.student-form-layout{grid-template-columns:1fr;gap:25px}.ellie-welcome{display:none}.classroom-app h1{font-size:26px}.workspace-description{overflow-wrap:anywhere;font-size:13px}.screen-heading{align-items:stretch;flex-direction:column;gap:17px}.screen-heading .classroom-button{align-self:flex-start}.student-summary{padding:20px}.demo-notice{padding:12px 14px;font-size:11px}.demo-notice strong{font-size:12px}.credentials{padding:20px}.form-actions .classroom-button{min-width:150px}}
@media(prefers-reduced-motion:reduce){.classroom-screen{animation:none}.classroom-app button{transition:none}}

/* Roster size changes the panel width, never a fixed list height. */
#screen-dashboard{margin-inline:auto}
#screen-dashboard[data-roster-size="0"],#screen-dashboard[data-roster-size="1"]{max-width:680px}
#screen-dashboard[data-roster-size="2"]{max-width:760px}
#screen-dashboard[data-roster-size="1"] .student-grid{grid-template-columns:minmax(0,360px);justify-content:center}
#screen-dashboard .empty-classroom{padding:30px 18px}
.student-item{min-width:0}
.student-card:hover{transform:translateY(-3px);box-shadow:0 5px 13px #694b3b18}
.student-card:active{transform:translateY(1px)}
.student-card>div{min-width:0}
.student-card:focus-visible{outline:3px solid #784777;outline-offset:4px}
.student-profile-dialog{width:min(520px,calc(100% - 28px));max-height:calc(100svh - 28px);overflow-y:auto;overscroll-behavior:contain;padding:30px;text-align:left;border-radius:25px;background:#fffaf2;animation:classroom-enter .18s ease-out}
.student-profile-dialog::backdrop{background:#43304766;backdrop-filter:blur(3px)}
.student-profile-dialog [hidden]{display:none!important}
.student-profile-dialog h2{font-size:25px;margin:8px 35px 20px 0;color:#603d50}
.student-profile-dialog .profile-eyebrow{font-size:10px;font-weight:bold;letter-spacing:1.4px;color:#a08174;margin:0}
.profile-close{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;background:transparent;color:#876775;font-size:28px;border-radius:12px}
.profile-close:hover{background:#f0e4dc}
.profile-details{display:grid;gap:18px;margin:0 0 25px;padding:20px;background:#f5eddf;border-radius:17px}
.profile-details dt{font-size:11px;color:#9b7d70;margin-bottom:6px}
.profile-details dd{font-size:16px;font-weight:bold;margin:0;overflow-wrap:anywhere}
.profile-actions{display:grid;gap:12px}
.student-profile-dialog .classroom-button{font-family:inherit;cursor:pointer}
.student-profile-dialog .classroom-button.danger{background:#f4dedc;box-shadow:0 3px 0 #d7b5b4;color:#974c58}
.student-profile-dialog .classroom-button:disabled{cursor:wait;opacity:.6}
.student-profile-dialog .form-actions .classroom-button{min-width:0}
.profile-note{font-size:12px;line-height:1.7;color:#94786f;margin:18px 0 0}
.profile-status{font-size:12px;line-height:1.7;color:#775b78;margin:18px 0 0;overflow-wrap:anywhere}
.profile-status:empty{display:none}
.profile-demo-notice{padding:14px;background:#f8ebd4;border-radius:14px;font-size:12px;line-height:1.7;color:#82674d;margin:0 0 20px}
.profile-remove-description{font-size:14px;color:#80646a;line-height:1.8;overflow-wrap:anywhere}
@media(max-width:760px){.student-profile-dialog{padding:25px 20px}.student-profile-dialog h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){.student-profile-dialog{animation:none}.student-card,.student-profile-dialog button{transition:none}}

.dashboard-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.classroom-settings-trigger{width:46px;min-width:46px;padding:8px;font-size:24px}
.classroom-settings-trigger span{line-height:1}
.classroom-settings-dialog .classroom-form{margin-top:22px}
.classroom-settings-dialog .profile-remove-description strong{overflow-wrap:anywhere;user-select:text}
@media(max-width:760px){.dashboard-actions{align-self:flex-start;max-width:100%;flex-wrap:wrap}}

.classroom-form select{width:100%;min-width:0;border:2px solid #eaded4;border-radius:13px;background:#fffdfa;padding:13px 14px;font:inherit;color:#603d50;outline-offset:3px;text-overflow:ellipsis}
.classroom-form select:focus-visible{outline:3px solid #b99bc3;border-color:transparent}
.classroom-form select[aria-invalid="true"]{border-color:#bc6d76}
.classroom-form select:disabled{opacity:.65;cursor:default}
#transfer-student-form{margin-top:20px}
#confirm-transfer-student:disabled{cursor:default}
#transfer-student-form[aria-busy="true"] #confirm-transfer-student:disabled{cursor:wait}