* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1a1a1a; color: #eee;
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
body { display: flex; flex-direction: column; overflow: hidden; }

#topbar { display: flex; align-items: center; gap: 12px; padding: 8px 12px;
  background: #232323; border-bottom: 1px solid #333; flex-wrap: wrap; }
#topbar .group { display: flex; align-items: center; gap: 6px; }
#topbar .right { margin-left: auto; }

button, select, input[type=number] {
  background: #2e2e2e; color: #eee; border: 1px solid #444; border-radius: 4px;
  padding: 6px 10px; font: inherit; cursor: pointer;
}
button:hover { background: #3a3a3a; }
button.active { background: #d96b1a; border-color: #d96b1a; color: #fff; }
input[type=number] { width: 80px; cursor: text; }
label { display: flex; align-items: center; gap: 4px; }

main { flex: 1; position: relative; overflow: hidden; }
#map { display: block; width: 100%; height: 100%; cursor: crosshair;
  background: #0d0d0d; }
#map.panning { cursor: grabbing; }
#map.draw-bus { cursor: crosshair; }

.panel { position: absolute; top: 12px; right: 12px; width: 280px; max-height: calc(100% - 24px);
  background: #232323; border: 1px solid #333; border-radius: 6px; padding: 12px;
  overflow-y: auto; z-index: 10; }
.panel.hidden { display: none; }
.panel h3 { margin: 0 0 8px; font-size: 14px; }
.panel .hint { font-size: 11px; color: #888; margin: 8px 0 0; }
.panel .danger { width: 100%; margin-top: 12px; background: #2e2e2e;
  border-color: #5a2222; color: #e35a5a; font-size: 12px; }
.panel .danger:hover { background: #3a1f1f; color: #ff8a8a; }

#pin-list { list-style: none; padding: 0; margin: 0; }
#pin-list li { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
#pin-list .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
#pin-list input { flex: 1; background: transparent; border: none; color: #eee; padding: 2px 4px; min-width: 0; }
#pin-list input:focus { background: #2e2e2e; outline: 1px solid #555; }
#pin-list input.alt { flex: 0 0 50px; font-size: 11px; }
#pin-list .del { padding: 2px 6px; font-size: 11px; }

#credits { position: absolute; bottom: 8px; right: 8px; z-index: 11;
  background: rgba(0,0,0,0.55); color: #aaa; padding: 4px 8px;
  border-radius: 4px; font: 11px ui-monospace, monospace; }
#credits a { color: #5aa6e3; text-decoration: none; }
#credits a:hover { text-decoration: underline; color: #ffd84a; }
#credits button { background: transparent; border: 1px solid #555; color: #aaa;
  padding: 1px 6px; font: inherit; cursor: pointer; border-radius: 3px; }
#credits button:hover { color: #fff; border-color: #888; }

#cursor-alt { position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,0.7); color: #fff; padding: 4px 8px; border-radius: 4px;
  font: 11px ui-monospace, monospace; pointer-events: none; z-index: 12; }
#cursor-alt.hidden { display: none; }

#trajectory-tip { position: absolute; pointer-events: none; z-index: 13;
  background: rgba(74,222,128,0.95); color: #000; padding: 4px 8px;
  border-radius: 4px; font: bold 11px ui-monospace, monospace;
  white-space: nowrap; transform: translate(12px, -28px); }
#trajectory-tip.hidden { display: none; }

#hint { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: #d96b1a; color: #fff; padding: 10px 18px; border-radius: 6px;
  font-size: 14px; font-weight: 600; pointer-events: none; opacity: 0;
  transition: opacity 0.2s; box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  z-index: 20; }
#hint.show { opacity: 1; }

body.mode-ring .bus-controls { display: none; }

#pin-popup { position: absolute; z-index: 15;
  background: rgba(20,20,20,0.95); border: 1px solid #555; border-radius: 6px;
  padding: 8px 10px; pointer-events: auto;
  font: 12px ui-monospace, SFMono-Regular, monospace;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  min-width: 170px; }
#pin-popup .suggest { margin-top: 6px; padding: 6px 8px; border-radius: 4px;
  background: rgba(217,107,26,0.15); border: 1px solid #d96b1a;
  color: #ffd84a; text-align: center; line-height: 1.3; }
#pin-popup.hidden { display: none; }
#pin-popup .title { font-weight: 700; color: #fff; margin-bottom: 4px;
  padding-bottom: 4px; border-bottom: 1px solid #444; }
#pin-popup .row { display: flex; justify-content: space-between; gap: 12px;
  line-height: 1.5; }
#pin-popup .k { color: #888; }
#pin-popup .v { color: #fff; }
#pin-popup .v.good { color: #6cd66c; }
#pin-popup .v.bad { color: #e35a5a; }
#pin-popup details.extra { margin-top: 4px; padding-top: 4px;
  border-top: 1px solid #444; }
#pin-popup details.extra summary { color: #888; cursor: pointer;
  user-select: none; font-size: 11px; padding: 2px 0; }
#pin-popup details.extra summary:hover { color: #ccc; }
#pin-popup details.extra[open] summary { color: #ccc; margin-bottom: 2px; }