.hs-toprow {
  display:flex; gap:10px; margin:8px 0; align-items:center; flex-wrap:wrap;
  padding:10px 14px; background:#14172a; border:1px solid #232539; border-radius:8px;
}
.hs-toprow label { display:flex; flex-direction:column; gap:3px; font-size:11px; color:#888; }
.hs-toprow select, .hs-toprow input {
  background:#1a1d2c; color:#eee; border:1px solid #2a2d3c; border-radius:6px; padding:6px 8px;
  font-size:13px;
}
.hs-toprow .ghost-btn { background:transparent; color:#7cd5ff; border:1px solid #2a4a6a; border-radius:6px; padding:6px 10px; font-size:12px; cursor:pointer; align-self:flex-end; }
.hs-toprow .ghost-btn:hover { background:#1a2030; }

.hs-mode-group, .hs-orient-group { display:flex; gap:0; }
.hs-mode-group button, .hs-orient-group button {
  background:#1a1d2c; color:#aaa; border:1px solid #2a2d3c; padding:7px 14px; font-size:13px; cursor:pointer; border-radius:0;
}
.hs-mode-group button:first-child, .hs-orient-group button:first-child { border-radius:6px 0 0 6px; }
.hs-mode-group button:last-child, .hs-orient-group button:last-child { border-radius:0 6px 6px 0; }
.hs-mode-group button.active, .hs-orient-group button.active { background:#3b4070; color:#fff; border-color:#5a6090; }
.hs-mode-group button:hover, .hs-orient-group button:hover { background:#232539; }

.hs-bookmark { display:flex; gap:6px; align-items:center; margin-left:auto; }
.hs-bookmark button, .hs-bookmark select { background:#1a1d2c; color:#ddd; border:1px solid #2a2d3c; border-radius:6px; padding:6px 10px; font-size:12px; cursor:pointer; }
.hs-bookmark button:hover { background:#232539; }

.hs-jumprow, .hs-aimrow {
  display:flex; gap:5px; flex-wrap:wrap; align-items:center;
  padding:8px 14px; background:#0e1020; border:1px solid #1a1d2c; border-radius:8px; margin:6px 0;
}
.hs-jumprow .lbl, .hs-aimrow .lbl { color:#888; font-size:11px; padding-right:4px; }
.hs-jumprow .sep, .hs-aimrow .sep { color:#444; padding:0 4px; }
.hs-jumprow button, .hs-aimrow button {
  background:#1a1d2c; color:#ddd; border:1px solid #2a2d3c; border-radius:5px; padding:5px 9px; font-size:12px; cursor:pointer;
}
.hs-jumprow button:hover, .hs-aimrow button:hover { background:#3b4070; color:#fff; }

.hs-main { display:grid; grid-template-columns: 1fr 240px; gap:12px; align-items:stretch; }
@media (max-width:900px) { .hs-main { grid-template-columns: 1fr; } }

.hs-canvas-wrap {
  position:relative; background:#02030a; border:1px solid #232539; border-radius:8px; overflow:hidden;
  aspect-ratio: 1/1; max-width:720px; margin:0 auto;
}
#hs-canvas { display:block; width:100%; height:100%; cursor:grab; user-select:none; touch-action:none; }
#hs-canvas:active { cursor:grabbing; }

.hs-readout {
  position:absolute; left:12px; top:12px;
  background:rgba(2,3,10,0.78); padding:8px 14px; border-radius:6px;
  font-size:13px; color:#ddd; line-height:1.6; border:1px solid #2a2d3c;
  display:flex; gap:18px;
}
.hs-readout .k { color:#888; margin-right:4px; }
.hs-readout strong { color:#fff5b6; font-size:16px; }

.hs-mode-hint {
  position:absolute; right:12px; bottom:12px;
  font-size:11px; color:#888; background:rgba(2,3,10,0.55); padding:4px 8px; border-radius:4px;
}

.hs-side { display:flex; flex-direction:column; gap:10px; }
.hs-side > div { background:#14172a; border:1px solid #232539; border-radius:8px; padding:12px; }
.hs-card-title, .hs-moon-title { font-size:11px; color:#888; margin-bottom:8px; text-transform:uppercase; letter-spacing:1px; }

.hs-moon-card { text-align:center; }
#hs-moon { display:block; margin:0 auto; background:#02030a; border-radius:50%; }
.hs-moon-stats { margin-top:10px; font-size:12px; line-height:1.6; text-align:left; }
.hs-moon-stats > div { display:flex; justify-content:space-between; }
.hs-moon-stats .k { color:#888; }
.hs-moon-stats strong { color:#f6c34a; }

.hs-camera-card label, .hs-trail-card label, .hs-overlay-card label {
  display:flex; flex-direction:column; gap:3px; font-size:12px; color:#888; margin-top:6px;
}
.hs-camera-card select, .hs-camera-card input,
.hs-trail-card input { background:#1a1d2c; color:#eee; border:1px solid #2a2d3c; border-radius:6px; padding:5px 8px; font-size:13px; width:100%; box-sizing:border-box; }
.hs-overlay-card label.ck, .hs-trail-card label.ck { flex-direction:row; align-items:center; gap:6px; color:#ddd; cursor:pointer; }

#hs-site-info { font-size:12px; color:#bbb; line-height:1.7; }
#hs-site-info .k { color:#888; }

.hs-bottom { background:#14172a; border:1px solid #232539; border-radius:8px; padding:12px; margin-top:10px; }
.hs-az-slider { display:flex; flex-direction:column; gap:6px; }
.hs-az-slider label { display:flex; align-items:center; gap:8px; font-size:12px; color:#888; }
.hs-az-slider input[type=range] { flex:1; }
.hs-az-slider span { min-width:48px; color:#fff5b6; }

.hs-legend {
  display:flex; gap:14px; flex-wrap:wrap; margin:10px 0; font-size:12px; color:#bbb; align-items:center;
}
.hs-legend .dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:4px; vertical-align:middle; }
.hs-legend .rect { display:inline-block; width:18px; height:10px; border:2px solid #fff; margin-right:4px; vertical-align:middle; }

dialog#hs-add-dialog {
  background:#14172a; color:#eee; border:1px solid #2a2d3c; border-radius:10px;
  padding:20px; min-width:300px; max-width:400px;
}
dialog#hs-add-dialog::backdrop { background:rgba(0,0,0,0.6); }
dialog#hs-add-dialog h3 { margin:0 0 14px 0; font-size:16px; }
dialog#hs-add-dialog label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:#aaa; margin-bottom:10px; }
dialog#hs-add-dialog input { background:#1a1d2c; color:#eee; border:1px solid #2a2d3c; border-radius:6px; padding:6px 10px; font-size:13px; }
dialog#hs-add-dialog .row { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; }
dialog#hs-add-dialog .row button { background:#1a1d2c; color:#ccc; border:1px solid #2a2d3c; border-radius:6px; padding:8px 14px; font-size:13px; cursor:pointer; }
dialog#hs-add-dialog .row .primary { background:#3b4070; color:#fff; border-color:#5a6090; }
dialog#hs-add-dialog .small { font-size:11px; }

/* big text mode */
body.hs-bigtext .hs-readout strong { font-size:22px; }
body.hs-bigtext .hs-readout { font-size:16px; }