*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{flex-direction:column;min-height:100vh;padding:1rem;display:flex}.app-header{text-align:center;padding:1rem 0 1.5rem}.app-header h1{letter-spacing:-.5px;text-shadow:0 2px 8px #00000040;font-size:2.2rem;font-weight:800}.subtitle{opacity:.8;margin-top:.25rem;font-size:.95rem}.app-main{flex:1;grid-template-columns:2fr 1fr;gap:1.5rem;width:100%;max-width:1400px;margin:0 auto;display:grid}.camera-section{position:relative}.video-container{aspect-ratio:4/3;background:#0000004d;border-radius:16px;width:100%;position:relative;overflow:hidden;box-shadow:0 8px 32px #0000004d}.video-container video{object-fit:cover;width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(-1)}.overlay-canvas{pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(-1)}.overlay-message{color:#fff;z-index:10;background:#00000080;flex-direction:column;justify-content:center;align-items:center;gap:1rem;font-size:1.1rem;display:flex;position:absolute;inset:0}.overlay-message.error{color:#ff6b6b;background:#000000b3}.start-icon{margin-bottom:.5rem;font-size:3rem}.start-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:2px solid #ffffff4d;border-radius:50px;margin-top:.5rem;padding:.75rem 2rem;font-size:1.1rem;font-weight:700;transition:all .2s;box-shadow:0 4px 15px #0003}.start-btn:hover{border-color:#fff9;transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.start-btn:active{transform:translateY(0)}.spinner{border:4px solid #fff3;border-top-color:#fff;border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.stats-section{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff1a;border-radius:16px;flex-direction:column;gap:1rem;padding:1.5rem;display:flex;box-shadow:0 8px 32px #0003}.stats-section h2{text-align:center;margin-bottom:.5rem;font-size:1.3rem;font-weight:700}.stat-card{background:#ffffff14;border-radius:12px;justify-content:space-between;align-items:center;padding:1rem 1.25rem;transition:background .2s;display:flex}.stat-card:hover{background:#ffffff24}.stat-label{opacity:.85;font-size:.9rem;font-weight:500}.stat-value{font-size:1.1rem;font-weight:700}.stat-value.success{color:#0f8}.stat-value.failure{color:#ff6b6b}.stat-value.status-good{color:#0f8}.stat-value.status-weak{color:#fd0}.stat-value.status-low{color:#ff6b6b}.info-box{opacity:.8;background:#ffffff0f;border-radius:12px;margin-top:auto;padding:1rem;font-size:.82rem;line-height:1.6}.info-box p{margin-bottom:.4rem}.info-box p:last-child{margin-bottom:0}@media (width<=768px){.app-main{grid-template-columns:1fr}.app-header h1{font-size:1.6rem}.stats-section{order:2}.camera-section{order:1}}