*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#e5e7eb;background:radial-gradient(circle at top,#1f2933 0,#020617 55%);min-height:100vh;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#app{max-width:1200px;margin:0 auto;padding:1.5rem}.app-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.app-header h1{font-size:1.5rem;font-weight:600}.camera-indicator{color:#f97316;background:#111827;border:1px solid #374151;border-radius:999px;padding:.25rem .6rem;font-size:.9rem}.camera-indicator.on{color:#22c55e}.layout{grid-template-columns:minmax(0,2.2fr) minmax(0,1.3fr);gap:1.5rem;display:grid}@media (max-width:900px){.layout{grid-template-columns:minmax(0,1fr)}}.video-section{background:radial-gradient(circle at 0 0,#111827,#020617 55%);border:2px solid #1f2937;border-radius:1rem;padding:.75rem;transition:border-color .2s,box-shadow .2s;position:relative;box-shadow:0 18px 45px #0009}.video-wrapper{aspect-ratio:4/3;background:#020617;border-radius:.75rem;position:relative;overflow:hidden}video{object-fit:cover;background:#020617;width:100%;height:100%}.roi-overlay{cursor:crosshair;position:absolute;inset:0}.roi-overlay.drawing{background:#0000004d}.roi-box{pointer-events:none;background:#22c55e1a;border:2px dashed #22c55e;position:absolute}.roi-box.hidden{display:none}.roi-box:after{content:"Focus Area";color:#22c55e;text-transform:uppercase;letter-spacing:.05em;background:#000000b3;border-radius:4px;padding:2px 6px;font-size:.7rem;position:absolute;top:-24px;left:0}.alert-overlay{pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.alert-overlay.hidden{display:none}.alert-text{letter-spacing:.03em;text-transform:uppercase;color:#e5e7eb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172acc;border:1px solid #94a3b899;border-radius:999px;padding:.5rem 1rem;font-size:.9rem;font-weight:600}.side-panel{flex-direction:column;gap:1rem;display:flex}.status-block,.description-block,.controls-block,.log-block{background:#0f172ae6;border:1px solid #1f2937;border-radius:.75rem;padding:.75rem 1rem}.status-block .status-line{margin-bottom:.25rem;font-size:.9rem}.status-block .status-line.small{opacity:.85;font-size:.8rem}.status-block .value{font-weight:600}.description-block h2,.controls-block h2,.log-block h2{text-transform:uppercase;letter-spacing:.06em;color:#9ca3af;margin-bottom:.4rem;font-size:.95rem}.description-block .description{color:#e5e7eb;font-size:.9rem;line-height:1.4}.controls-block .controls-row{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}button{cursor:pointer}.primary-btn,.secondary-btn{border:none;border-radius:999px;justify-content:center;align-items:center;padding:.4rem .9rem;font-size:.9rem;font-weight:500;display:inline-flex}.primary-btn{color:#f9fafb;background:linear-gradient(90deg,#22c55e,#16a34a);box-shadow:0 10px 18px #22c55e4d}.primary-btn.stop{background:linear-gradient(90deg,#ef4444,#b91c1c);box-shadow:0 10px 18px #ef44444d}.secondary-btn{color:#e5e7eb;background:#111827;border:1px solid #374151}.secondary-btn:disabled{opacity:.5;cursor:not-allowed}.secondary-btn.active{color:#020617;background:#22c55e;border-color:#22c55e}label{font-size:.9rem}select,input[type=range]{flex:1}select{color:#e5e7eb;background:#020617;border:1px solid #374151;border-radius:999px;padding:.25rem .6rem;font-size:.85rem}input[type=range]{accent-color:#22c55e}.small{opacity:.9;font-size:.8rem}.event-log{max-height:150px;padding-right:.25rem;font-size:.8rem;list-style:none;overflow-y:auto}.event-log li{border-bottom:1px solid #1f2937cc;padding:.18rem 0}.event-log li:last-child{border-bottom:none}.event-log .timestamp{color:#6b7280;margin-right:.3rem}.event-log .risk-high{color:#fecaca}.event-log .risk-medium{color:#fed7aa}.event-log .risk-low{color:#bbf7d0}.video-section.risk-idle{border-color:#1f2937}.video-section.risk-low{border-color:#22c55e;box-shadow:0 0 0 1px #22c55e4d,0 18px 45px #22c55e40}.video-section.risk-medium{border-color:#f97316;box-shadow:0 0 0 1px #f9731659,0 18px 45px #f973164d}.video-section.risk-high{border-color:#ef4444;animation:1.2s ease-in-out infinite pulse-border;box-shadow:0 0 0 1px #ef444473,0 22px 60px #ef444466}@keyframes pulse-border{0%{box-shadow:0 0 #ef4444cc}70%{box-shadow:0 0 0 8px #ef444400}to{box-shadow:0 0 #ef444400}}.video-section.risk-high .alert-text{color:#fee2e2;background:#991b1bd9;border-color:#fca5a5d9}.video-section.risk-medium .alert-text{color:#ffedd5;background:#9a3412e6;border-color:#fed7aae6}.video-section.risk-low .alert-text{color:#dcfce7;background:#166534f2;border-color:#bbf7d0e6}.video-section.risk-idle .alert-text{background:#0f172ad9;border-color:#94a3b8cc}