*{margin:0;padding:0;box-sizing:border-box}body{background:#0a0a0f;color:#0f8;font-family:Courier New,Fira Code,monospace;min-height:100vh;overflow-x:hidden}#root{max-width:1440px;margin:0 auto;padding:16px}.app{display:grid;grid-template-columns:1fr 320px;grid-template-rows:auto 1fr;gap:16px;height:calc(100vh - 32px)}.app-header{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:#101018;border:1px solid #00ff8822;border-radius:4px}.app-header h1{font-size:14px;font-weight:400;letter-spacing:2px;text-transform:uppercase;color:#0f8}.app-header .status{display:flex;gap:16px;font-size:11px;color:#666}.app-header .status .ready{color:#0f8}.app-header .status .loading{color:#fa0}.camera-feed{position:relative;background:#000;border:1px solid #00ff8822;border-radius:4px;overflow:hidden;display:flex;align-items:center;justify-content:center}.camera-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-canvas{position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(-1)}.loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#000;color:#666;font-size:12px;letter-spacing:1px}.calibration-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000d9;gap:12px}.calibration-text{font-size:14px;color:#0f8;letter-spacing:1px}.calibration-bar-track{width:200px;height:6px;background:#1a1a24;border-radius:3px;overflow:hidden}.calibration-bar-fill{height:100%;background:#0f8;border-radius:3px;transition:width .1s linear}.calibration-label{font-size:10px;color:#888;letter-spacing:1px}.face-status{position:absolute;top:12px;right:12px;padding:4px 10px;font-size:10px;letter-spacing:1px;text-transform:uppercase;border-radius:2px;background:#101018}.face-status.detected{color:#0f8;border:1px solid #00ff8844}.face-status.none{color:#f33;border:1px solid #ff333344}.side-panel{display:flex;flex-direction:column;gap:16px}.panel{background:#101018;border:1px solid #00ff8822;border-radius:4px;padding:16px}.panel-title{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#666;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #00ff8811}.telemetry-grid{display:grid;gap:8px}.telemetry-row{display:flex;justify-content:space-between;align-items:center;padding:8px;background:#0a0a12;border-radius:2px}.telemetry-label{font-size:11px;color:#888;letter-spacing:1px}.telemetry-value{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}.telemetry-value.normal{color:#0f8}.telemetry-value.warning{color:#fa0}.telemetry-value.violation{color:#f33}.violation-bar{margin-top:12px;padding:8px;background:#0a0a12;border-radius:2px}.violation-bar-track{height:4px;background:#1a1a24;border-radius:2px;overflow:hidden;margin-top:6px}.violation-bar-fill{height:100%;background:#f33;border-radius:2px;transition:width .1s linear}.violation-count{font-size:10px;color:#666;display:flex;justify-content:space-between}.violation-logger{flex:1;overflow-y:auto;max-height:300px}.violation-logger::-webkit-scrollbar{width:4px}.violation-logger::-webkit-scrollbar-track{background:#0a0a12}.violation-logger::-webkit-scrollbar-thumb{background:#0f82;border-radius:2px}.violation-entry{padding:6px 8px;margin-bottom:4px;background:#0a0a12;border-left:2px solid #ff3333;font-size:10px;display:flex;justify-content:space-between;color:#ccc}.violation-entry .time{color:#666}.violation-entry .type{color:#f55;text-transform:uppercase;letter-spacing:.5px}.log-empty{font-size:11px;color:#444;text-align:center;padding:24px}@media (max-width: 768px){.app{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}.side-panel{flex-direction:row;overflow-x:auto}.panel{min-width:280px}}