body {
    font-family: Arial, sans-serif;
    background: #0d0d0d;
    color: #eee;
    text-align: center;
    margin: 0;
    padding: 40px;
}
h1 { margin-bottom: 10px; }
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 40px;
}
.card {
    background: #1a1a1a;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
}
.orb {
    width: 40px; height: 40px; border-radius: 50%;
    background: gray; margin: 10px auto;
    box-shadow: 0 0 15px rgba(0,0,0,0.6);
    transition: background 0.4s, box-shadow 0.4s;
}
.orb.green  { background:#00ff88; box-shadow:0 0 15px #00ff88; }
.orb.yellow { background:#ffcc00; box-shadow:0 0 15px #ffcc00; }
.orb.red    { background:#ff3344; box-shadow:0 0 15px #ff3344; }
video {
    width: 100%; border-radius: 10px; background: #000;
}
button {
    background: #0078ff; color: white; border: none; border-radius: 5px;
    padding: 8px 16px; cursor: pointer; margin-top: 8px;
}
button:disabled { background:#444; cursor:not-allowed; }
.bar { width:80%; height:10px; margin:8px auto; background:#333; border-radius:5px; overflow:hidden;}
.bar div { height:10px; width:0; background:#00ff99; transition:width 0.4s; }
/*canvas { display:none; }*/
#lightCanvas { display: none; }
.result { margin-top: 10px; font-size: 16px; }