body { margin: 0; background-color: #010105; color: #00ffcc; font-family: monospace; display: flex; height: 100vh; overflow: hidden; }
#map-container { position: relative; flex-grow: 1; cursor: grab; overflow: hidden; background: #000; }
canvas { display: block; width: 100%; height: 100%; }

#bottom-optics { position: absolute; bottom: 20px; left: 20px; background: rgba(5, 5, 20, 0.85); border: 1px solid #005555; padding: 10px 15px; border-radius: 4px; z-index: 10; display: flex; align-items: center; gap: 12px; }
#bottom-optics label { font-size: 0.7rem; color: #88ccff; text-transform: uppercase; margin-right: 5px; font-weight: bold; }
#bottom-optics input[type=range] { width: 120px; cursor: pointer; accent-color: #00ffcc; }

.hud-divider { width: 1px; height: 24px; background: #005555; margin: 0 5px; }

.icon-btn { background: transparent; border: 1px solid #00ffcc; color: #00ffcc; margin: 0; padding: 6px 10px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; border-radius: 2px; }
.icon-btn:hover { background: #00ffcc; color: #000; }
.icon-btn svg { width: 16px; height: 16px; }

#rulerBtn { border-color: #ffcc00; color: #ffcc00; }
#rulerBtn:hover { background: rgba(255, 204, 0, 0.2); }
#rulerBtn.active { background: #ffcc00; color: #000; }

.data-btn { background: rgba(0, 40, 60, 0.5); border: 1px solid #00ffcc; color: #00ffcc; padding: 8px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.2s; border-radius: 2px; font-family: inherit; font-size: 0.75rem; font-weight: bold; width: 100%; }
.data-btn:hover { background: #00ffcc; color: #000; }
.data-btn svg { width: 16px; height: 16px; }

#sidebar { width: 470px; background-color: #05050f; border-left: 2px solid #00ffcc; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 15px; }

.panel { background: rgba(0, 25, 40, 0.7); border: 1px solid #005555; display: flex; flex-direction: column; }
.panel-header { margin: 0; color: #00ffff; font-size: 0.85rem; text-transform: uppercase; padding: 12px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; user-select: none; background: rgba(0, 40, 60, 0.5); }
.panel-header:hover { background: rgba(0, 50, 70, 0.8); }
.panel-content { padding: 12px; border-top: 1px solid #005555; display: block; }
.panel-content.closed { display: none; }
.caret { font-size: 0.6rem; transition: transform 0.2s; }
.caret.closed { transform: rotate(-90deg); }

button, select, input[type=text], input[type=number] { background: #001a1a; color: #00ffcc; border: 1px solid #00ffcc; padding: 6px; width: 100%; margin-bottom: 8px; font-family: inherit; font-size: 0.8rem; box-sizing: border-box; }
button:hover { background: #00ffcc; color: #000; cursor: pointer; }
input:disabled, select:disabled { background: #000808; color: #555; border-color: #003333; cursor: not-allowed; }

.form-group { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.form-group label { width: 40%; font-size: 0.75rem; color: #88ccff; }
.form-group input, .form-group select { width: 58%; margin-bottom: 0; padding: 4px; }

#editModeBtn { font-weight: bold; border: 2px solid #ff5500; color: #ff5500; margin-bottom: 10px; background: transparent; }
#editModeBtn.active { background: #ff5500; color: #000; }

.input-row { display: flex; gap: 5px; margin-bottom: 5px; align-items: center; }
.legend-item { display: inline-block; font-size: 0.65rem; color: #aaa; margin-right: 8px; }

#searchResults { max-height: 150px; overflow-y: auto; margin-top: 5px; font-size: 0.75rem; border-top: 1px solid #005555; }
.search-item { padding: 5px; cursor: pointer; border-bottom: 1px solid #003333; transition: background 0.2s; }
.search-item:hover { background: #002222; }

.lock-btn { background: transparent; border: 1px solid #555; color: #555; cursor: pointer; padding: 2px 6px; margin: 0; border-radius: 2px; font-size: 0.8rem; line-height: 1; transition: all 0.2s; width: 28px; }
.lock-btn:hover { border-color: #00ffcc; color: #00ffcc; }
.lock-btn.active { border-color: #00ffcc; color: #00ffcc; background: rgba(0, 255, 204, 0.1); }
.insert-btn { background: transparent; border: 1px solid #88ccff; color: #88ccff; cursor: pointer; padding: 2px 6px; margin: 0 0 0 5px; border-radius: 2px; font-weight: bold; font-size: 0.85rem; line-height: 1; width: 26px;}
.insert-btn:hover { background: rgba(136, 204, 255, 0.2); }

.leg-speed-input { width: 50px; padding: 2px; font-size: 0.7rem; margin: 0 5px; text-align: center; background: #001a1a; color: #ffcc00; border: 1px solid #005555; }
.leg-speed-input:focus { border-color: #ffcc00; outline: none; }