html, body { height: 100%; margin: 0; background: #0b0f14; color: #e7eef7; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
#c { display:block; width:100vw; height:100vh; }
#hud { position: fixed; top: env(safe-area-inset-top, 0px); left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px);
  padding: 12px; pointer-events: none; }
#hud .panel { margin-top: 10px; background: rgba(10,14,20,0.65); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 10px 12px; max-width: 520px; backdrop-filter: blur(8px); }
.row { display:flex; gap:10px; align-items:center; justify-content: space-between; }
.row.left { justify-content: flex-start; }
.title { font-weight: 800; letter-spacing: .3px; font-size: 16px; }
.pill { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 4px 10px; font-size: 12px; }
.btn { pointer-events: all; cursor: pointer; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color: #e7eef7;
  border-radius: 12px; padding: 8px 10px; font-weight: 650; }
.btn.small { padding: 4px 8px; border-radius: 10px; font-size: 12px; }
.btn:hover { background: rgba(255,255,255,0.18); }
.btn.secondary { opacity: .9; }
.chk { pointer-events: all; user-select: none; display:flex; gap:8px; align-items:center; font-size: 12px; opacity: .9; }
.info { font-size: 12px; line-height: 1.3; margin-top: 8px; }
.muted { opacity: .7; }
.grid { display:grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 12px; margin-top: 8px; }
.help { font-size: 11px; opacity: .8; margin-top: 10px; line-height: 1.35; }

.input{
  pointer-events: all;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #e7eef7;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 12px;
  width: 120px;
}
.input:focus{ outline:none; border-color: rgba(120,170,255,0.55); }