:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:15px;line-height:1.5}body{margin:0;background:#0d1117;color:#c9d1d9}#root{min-height:100vh}h1,h2,h3{font-weight:600}h1{font-size:1.4rem;margin:0 0 8px}h2{font-size:1.2rem;margin:0 0 12px}h3{font-size:1.05rem}p{margin:0}code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:#1c2128;padding:2px 6px;border-radius:4px}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#0d1117;color:#c9d1d9}.muted{color:#8b949e}.small{font-size:.85rem}.ok{color:#3fb950}.no{color:#f85149}.big{font-size:1.4rem}.emoji{font-size:1.2rem}.error{background:#3b1219;border:1px solid #f85149;color:#ffa198;padding:10px 14px;border-radius:6px;margin:10px 0}.hint{background:#1c2128;border-left:3px solid #58a6ff;padding:10px 14px;margin:14px 0;border-radius:4px;font-size:.9rem}.btn{background:#21262d;border:1px solid #30363d;color:#c9d1d9;padding:8px 14px;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .15s}.btn:hover:not(:disabled){background:#30363d;border-color:#58a6ff}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:#238636;border-color:#2ea043;color:#fff}.btn-primary:hover:not(:disabled){background:#2ea043}.btn-danger{background:#da3633;border-color:#f85149;color:#fff}.btn-sm{padding:5px 10px;font-size:.85rem}.btn-row{display:flex;gap:6px;flex-wrap:wrap}.app{min-height:100vh}.app-header{display:flex;align-items:center;gap:20px;padding:14px 24px;background:#161b22;border-bottom:1px solid #30363d}.app-header h1{font-size:1.2rem;margin:0}.app-header p{margin:2px 0 0;font-size:.85rem}.tabs{display:flex;gap:4px;flex:1;margin-left:20px}.tab{background:transparent;border:none;color:#8b949e;padding:8px 14px;cursor:pointer;border-radius:6px;font-size:.95rem}.tab:hover{background:#21262d;color:#c9d1d9}.tab.active{background:#238636;color:#fff}.app-main{padding:20px;max-width:1400px;margin:0 auto}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0d1117,#161b22)}.login-card{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:36px;width:360px}.login-card h1{margin:0 0 4px}.login-card p{margin:0 0 20px}.login-card form{display:flex;flex-direction:column;gap:12px}.login-card label{display:flex;flex-direction:column;gap:4px;font-size:.9rem;color:#8b949e}.login-card input{background:#0d1117;border:1px solid #30363d;color:#c9d1d9;padding:8px 10px;border-radius:6px;font-size:.95rem}.login-card input:focus{outline:none;border-color:#58a6ff}.login-card button{margin-top:8px;padding:10px;font-size:1rem}.ai-panel{background:#161b22;border:1px solid #30363d;border-radius:10px;padding:20px}.ai-panel h2{margin-top:0}.play-grid,.train-grid{display:grid;grid-template-columns:minmax(320px,1fr) 320px;gap:20px}.webcam-box{position:relative;background:#000;border-radius:8px;overflow:hidden;aspect-ratio:4/3}.webcam-box video{width:100%;height:100%;object-fit:cover}.webcam-box .overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.webcam-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000000b3}.info-card{background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:14px;margin-bottom:14px}.info-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #21262d;font-size:.9rem}.info-row:last-child{border-bottom:none}.toggle{display:flex;align-items:center;gap:8px;font-size:.9rem;margin:10px 0;cursor:pointer}.emotion-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0}.emotion-btn{font-size:1.3rem;padding:10px 4px;line-height:1.2}.class-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}.class-row{display:flex;justify-content:space-between;align-items:center;background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:10px 12px;transition:all .15s}.class-row.active{border-color:#3fb950;background:#0f2419}.class-name{display:flex;flex-direction:column;gap:2px}.class-name .count{font-size:.8rem;color:#8b949e}.class-actions{display:flex;gap:6px}.dash-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0}.dash-summary>div{background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:4px}.dash-summary span{font-size:.85rem;color:#8b949e}.dash-section{margin:20px 0}.dash-section h3{margin:0 0 10px;font-size:1.05rem}.device-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}.device-card{background:#0d1117;border:1px solid #30363d;border-radius:8px;padding:12px}.device-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.device-meta{font-size:.8rem;color:#8b949e;margin-bottom:8px;line-height:1.5}.classroom-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0;padding-bottom:10px;border-bottom:1px solid #30363d;align-items:center}.classroom-new{display:flex;gap:6px;margin-left:auto}.classroom-new input{background:#0d1117;border:1px solid #30363d;color:#c9d1d9;padding:6px 10px;border-radius:6px;font-size:.9rem}.form-grid{display:grid;grid-template-columns:repeat(2,1fr) auto;gap:8px;margin:10px 0}.form-grid input{background:#0d1117;border:1px solid #30363d;color:#c9d1d9;padding:8px 10px;border-radius:6px;font-size:.9rem}.form-grid input:focus{outline:none;border-color:#58a6ff}.speaker-grid,.autopilot-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.sensor-row{display:grid;grid-template-columns:60px 60px 1fr;gap:10px;align-items:center;margin:8px 0;font-size:.9rem}.autopilot-log{margin-top:12px;padding:10px;background:#0d1117;border:1px solid #30363d;border-radius:6px;max-height:200px;overflow-y:auto}.draw-grid{display:grid;grid-template-columns:auto 320px;gap:20px;align-items:start}.draw-canvas{background:#fff;border:2px solid #30363d;border-radius:8px;cursor:crosshair;touch-action:none;image-rendering:pixelated;max-width:100%;height:auto}.draw-info select{background:#0d1117;border:1px solid #30363d;color:#c9d1d9;padding:4px 8px;border-radius:4px;font-size:.9rem}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}.preset-grid .btn{font-size:.8rem;padding:6px 8px}@media(max-width:900px){.play-grid,.train-grid,.draw-grid,.speaker-grid,.autopilot-grid,.dash-summary{grid-template-columns:1fr}.app-header{flex-wrap:wrap}.tabs{order:3;width:100%;margin-left:0}}