html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; font-family: Arial, sans-serif; }
#hud {
  position: fixed; top: 10px; left: 10px; right: 10px;
  background: rgba(0,0,0,0.55); color:#fff; padding:10px; border-radius:10px;
  z-index: 9999;
}
.hud-title { font-weight: bold; font-size: 16px; }
.hud-status { font-size: 13px; margin-top: 6px; opacity: 0.9; }
.hud-actions { margin-top: 8px; display:flex; gap:8px; }
.hud-actions button {
  flex:1; border:0; padding:10px; border-radius:8px;
  background:#1e88e5; color:#fff; font-size:14px;
}
.panel {
  position: fixed; left: 10px; right: 10px; bottom: 10px; top: 110px;
  background: rgba(255,255,255,0.96);
  border-radius: 12px; z-index: 9999; overflow: hidden;
}
.panel.hidden { display: none; }
.panel-header {
  padding: 10px; background: #f2f2f2; display:flex; justify-content:space-between; align-items:center;
}
.panel-header button { border:0; padding:8px 10px; border-radius:8px; background:#444; color:#fff; }
.panel-body { padding: 10px; overflow:auto; height: calc(100% - 48px); }
.item {
  border: 1px solid #ddd; border-radius: 10px; padding: 10px; margin-bottom: 10px;
}
.item .t { font-weight:bold; }
.item .d { font-size: 12px; color:#444; margin-top:4px; }
.item .btns { margin-top:8px; display:flex; gap:8px; }
.item .btns a { flex:1; text-align:center; text-decoration:none; padding:10px; border-radius:8px; color:#fff; background:#43a047; }
.item .btns a.sec { background:#1e88e5; }