.classroom-manager { margin-top:25px; padding:25px; border:1px solid #d9e5d7; border-radius:26px; background:#fffef8; box-shadow:0 14px 40px #5e775b0b; }
.parent-chip { text-decoration:none; }
.classroom-floating-alert { position:fixed; z-index:20; top:78px; right:20px; display:flex; align-items:center; gap:12px; width:min(400px,calc(100% - 40px)); padding:17px; border:1px solid #e5b98d; border-radius:17px; background:#fff3dfee; box-shadow:0 10px 35px #77552e22; color:#92623c; }
.classroom-floating-alert[hidden] { display:none; }.classroom-floating-alert strong { font:900 17px Nunito,sans-serif; }.classroom-floating-alert p { margin:5px 0 0; font-size:12px; line-height:1.6; }.classroom-floating-alert button { flex:none; border:1px solid #e6c6a1; border-radius:9px; background:#fffaf0; color:#916b42; padding:9px; font:700 11px 'Be Vietnam Pro',sans-serif; }
.classroom-manager [hidden] { display:none!important; }
.classroom-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.classroom-heading h2 { margin:0; color:#395d48; font:900 clamp(22px,2.2vw,29px)/1.3 Nunito,sans-serif; }
.classroom-heading p:last-child { margin:7px 0 0; color:#7b8675; font-size:12px; line-height:1.6; }
.classroom-private { border:1px solid #cfe1d0; border-radius:30px; padding:10px 13px; background:#eff7ed; color:#5c8262; white-space:nowrap; font-size:10px; font-weight:700; }
.classroom-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:20px 0; }
.classroom-stats>div { padding:14px 16px; border:1px solid #e3e8d8; border-radius:17px; background:#f4f7ed; }
.classroom-stats>div:nth-child(2) { background:#fff5e3; border-color:#f0e2c6; }.classroom-stats>div:nth-child(4) { background:#edf6f5; }.classroom-stats>div:nth-child(5) { background:#fff0e7; border-color:#f2ddcc; }
.classroom-stats span,.classroom-stats small { display:block; color:#7b846f; font-size:10px; line-height:1.5; }.classroom-stats span { font-weight:700; }.classroom-stats strong { display:block; margin:5px 0; color:#456b50; font:900 30px/1.2 Nunito,sans-serif; }.classroom-stats small { font-size:9px; }
.classroom-layout { display:grid; grid-template-columns:minmax(0,1fr) 335px; gap:23px; align-items:start; }
.classroom-source-bar { display:flex; align-items:center; flex-wrap:wrap; gap:12px; min-height:36px; margin-bottom:7px; font-size:10px; color:#81907c; }.classroom-source { margin-right:auto; border-radius:30px; padding:7px 11px; background:#eff3e8; color:#697e60; font-weight:700; }.classroom-source.live { color:#38694e; background:#e1f2e3; }.classroom-source.sample { color:#a07440; background:#fff0d4; }
.classroom-viewport { position:relative; width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:19px; background:radial-gradient(ellipse at 50% 30%,#315a4d,#203d35); isolation:isolate; }
.classroom-viewport video,.classroom-viewport img,.classroom-viewport canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.classroom-viewport canvas { z-index:2; touch-action:pan-y; pointer-events:none; }.classroom-viewport.is-drawing canvas { touch-action:none; cursor:crosshair; pointer-events:auto; }
.classroom-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:25px; text-align:center; color:#f7f2dd; }.classroom-placeholder>span { display:grid; place-items:center; width:65px; height:65px; border-radius:23px; margin-bottom:15px; background:#ffffff13; font-size:40px; color:#bfdfbf; }.classroom-placeholder strong { font:800 21px Nunito,sans-serif; }.classroom-placeholder p { margin:9px 0 0; color:#bed0bc; font-size:12px; line-height:1.8; }
.classroom-draw-hint { position:absolute; z-index:3; top:12px; left:50%; transform:translateX(-50%); width:max-content; max-width:90%; border-radius:30px; padding:9px 14px; background:#fff7e8f0; color:#865e36; font-size:11px; pointer-events:none; text-align:center; }
.classroom-camera-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:14px; }
.classroom-manager button,.classroom-file { display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid #d9dfcf; border-radius:11px; padding:10px 13px; min-height:39px; background:#f9faef; color:#617756; font:700 11px/1.4 'Be Vietnam Pro',sans-serif; cursor:pointer; }
.classroom-manager button:hover,.classroom-file:hover { background:#edf4e3; }.classroom-manager button:disabled { cursor:default; opacity:.5; }.classroom-manager button:focus-visible,.classroom-file:focus-within { outline:3px solid #a9cba4; outline-offset:2px; }
.classroom-manager .classroom-primary { color:#fff; background:#6d9b74; border-color:#6d9b74; }.classroom-manager .classroom-primary:hover { background:#547e5a; }.classroom-file { position:relative; overflow:hidden; }.classroom-file input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.classroom-status { margin:10px 1px; min-height:35px; color:#7a8871; font-size:11px; line-height:1.7; }.classroom-status.error { color:#b05b48; }
.classroom-alert { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:15px; margin-top:12px; border:1px solid #edc3a4; border-radius:15px; background:#fff0e1; color:#9f6042; }.classroom-alert strong { font:900 16px Nunito,sans-serif; }.classroom-alert p { margin:4px 0 0; font-size:12px; line-height:1.6; }.classroom-alert button { flex:none; background:#fff9eb; }
.classroom-settings { border:1px solid #dde6d6; border-radius:17px; background:#f6f8ef; }.classroom-settings summary { padding:15px 16px; color:#4a7253; font:900 16px Nunito,sans-serif; cursor:pointer; }.classroom-settings-body { padding:0 16px 16px; }.classroom-settings label { display:block; margin-top:11px; color:#62795b; font-size:10px; font-weight:700; }.classroom-settings select,.classroom-settings input[type=number] { display:block; width:100%; min-width:0; margin-top:5px; min-height:36px; padding:7px 8px; border:1px solid #d6dfcc; border-radius:9px; color:#58714f; background:#fffef8; font:500 10px/1.4 'Be Vietnam Pro',sans-serif; }.classroom-settings input[type=range] { display:block; width:100%; margin:10px 0; accent-color:#79a67c; }.classroom-settings-row { display:grid; grid-template-columns:1.4fr .8fr; gap:8px; }.classroom-settings p { margin:9px 0 0; color:#8a907c; font-size:10px; line-height:1.7; }.classroom-settings .classroom-note { padding-top:10px; border-top:1px solid #dfe6d6; font-size:9px; }.classroom-check input { vertical-align:middle; accent-color:#729d74; }
.classroom-zone-tools { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; }.classroom-zone-tools button { padding:8px 5px; font-size:10px; min-height:34px; }.classroom-zone-tools button[aria-pressed=true] { background:#e0edda; border-color:#91b38b; color:#466c44; }
.classroom-log-heading { display:flex; align-items:center; justify-content:space-between; margin:17px 0 10px; gap:10px; }.classroom-log-heading h3 { margin:0; color:#526c4d; font:900 15px Nunito,sans-serif; }.classroom-log-heading button { min-height:28px; padding:5px 9px; font-size:10px; }
.classroom-events { margin:0; padding:0; list-style:none; max-height:300px; overflow-y:auto; }.classroom-events li { padding:11px 10px; margin-bottom:7px; border:1px solid #e4e6d7; border-radius:11px; background:#fbfaf1; }.classroom-events li.attention { background:#fff0e5; border-color:#efd1b8; }.classroom-events time { display:block; margin-bottom:4px; color:#9a9d86; font-size:9px; }.classroom-events p { margin:0; color:#65785a; font-size:11px; line-height:1.6; }.classroom-events button { padding:5px 8px; min-height:27px; margin-top:8px; font-size:9px; }.classroom-events .classroom-empty-log,.classroom-log-note { color:#8d957f; font-size:10px; line-height:1.7; }.classroom-log-note { margin:9px 0 0; }
@media(max-width:1100px) { .classroom-layout { grid-template-columns:minmax(0,1fr) 300px; gap:17px; }.classroom-manager { padding:20px; }.classroom-private { white-space:normal; max-width:160px; line-height:1.6; } }
@media(max-width:960px) { .classroom-layout { grid-template-columns:1fr; }.classroom-sidebar { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:0 18px; }.classroom-settings { grid-row:1 / span 3; }.classroom-log-heading { margin-top:0; }.classroom-events { max-height:360px; }.classroom-stats { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:560px) { .classroom-manager { padding:17px 12px; border-radius:21px; }.classroom-heading { display:block; }.classroom-private { display:inline-block; margin-top:12px; max-width:none; }.classroom-sidebar { display:block; }.classroom-log-heading { margin-top:18px; }.classroom-stats { gap:6px; grid-template-columns:repeat(2,minmax(0,1fr)); }.classroom-stats>div { padding:11px; }.classroom-stats>div:last-child { grid-column:1 / -1; }.classroom-viewport { aspect-ratio:4/3; }.classroom-placeholder strong { font-size:18px; }.classroom-camera-controls { gap:6px; }.classroom-camera-controls button,.classroom-file { font-size:10px; padding:8px 11px; }.classroom-events { max-height:300px; } }