#site-body{font-family:Arial,Helvetica,sans-serif;margin:0;padding:0}
#site-body, body{background: rgba(51, 51, 51, 0.92); color: #fff}
#controls{padding:8px;background:#f3f3f3;border-bottom:1px solid #ddd}
#instructions{padding:8px}
#viewer{background:#111; width:100vw; height:100vh;}
button{margin-right:8px}
#info-panel {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-top: 10px;
}

#ui {
    background: #f3f3f3;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

button {
    background: #e0e0e0;
    border: 1px solid #888;
    padding: 6px 12px;
    cursor: pointer;
    border-radius: 4px;
}
button:hover {
    background: #d0d0d0;
}

input[type="file"] {
    margin-left: 8px;
}

/* panels (mirrors simulator inline styles) */
.panel { position: absolute; bottom: 10px; left: 10px; z-index: 1001; background: rgba(51,51,51,0.9); padding: 12px; border-radius: 8px; color: #fff; font-family: Arial, sans-serif; width: 260px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }
.panel2 { position: absolute; bottom: 10px; right: 10px; z-index: 1001; background: rgba(51,51,51,0.9); padding: 12px; border-radius: 8px; color: #fff; font-family: Arial, sans-serif; width: 320px; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }

.unit-btn{ background:#303030; color:#fff; border:1px solid #444; padding:6px 12px; border-radius:6px; cursor:pointer }
.unit-btn[aria-pressed="true"]{ background:#4caf50 }