* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #b9c2c6; font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: #e8eef1; }
#stage { position: fixed; inset: 0; display: block; touch-action: none; cursor: none; }

#panel {
  position: fixed; top: 12px; right: 12px; bottom: 12px; width: 290px;
  overflow-y: auto; padding: 14px 16px 16px;
  background: rgba(22, 34, 40, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
#panel.hidden { display: none; }
#panel header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
h1 { font-size: 17px; margin: 0; font-weight: 650; letter-spacing: 0.2px; }
h2 { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #8fb3c0; margin: 0 0 8px; font-weight: 600; }
section { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
section:first-of-type { border-top: 0; }
.hint { margin: 8px 0 10px; color: #9fb4bc; font-size: 11.5px; }

.row { display: grid; grid-template-columns: 96px 1fr 54px; align-items: center; gap: 8px; margin: 6px 0; }
.row span { color: #cfdde2; }
.row output { text-align: right; font-variant-numeric: tabular-nums; color: #9fc6d3; font-size: 12px; }
.row.check { grid-template-columns: 18px 1fr; cursor: pointer; }
input[type="range"] { width: 100%; accent-color: #7fd0e2; }
input[type="checkbox"] { accent-color: #7fd0e2; margin: 0; }

button {
  font: inherit; color: #e8eef1; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 6px 10px; cursor: pointer;
}
button:hover { background: rgba(255, 255, 255, 0.15); }
button:disabled { opacity: 0.5; cursor: progress; }
button.primary { background: #3c8ea3; border-color: #4ea5bb; }
button.primary:hover { background: #4aa1b7; }
button.icon { width: 28px; height: 28px; padding: 0; font-size: 18px; line-height: 1; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: rgba(0, 0, 0, 0.2); padding: 3px; border-radius: 10px; }
.seg button { border: 0; background: transparent; border-radius: 7px; }
.seg button.on { background: #e8f5f8; color: #16313a; font-weight: 600; }

.cam { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
#camStatus { color: #9fb4bc; font-size: 12px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }

#showPanel { position: fixed; top: 12px; right: 12px; display: none; background: rgba(22, 34, 40, 0.8); }
body.panel-hidden #showPanel { display: block; }

#stats {
  position: fixed; left: 12px; top: 12px; padding: 4px 9px; border-radius: 7px;
  background: rgba(22, 34, 40, 0.6); font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none;
}

#cam {
  position: fixed; left: 12px; bottom: 12px; width: 220px; border-radius: 10px;
  transform: scaleX(-1); display: none; opacity: 0.9; pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
#cam.show { display: block; }

@media (max-width: 700px) {
  #panel { top: auto; height: 46vh; left: 12px; width: auto; }
}