/* Roadbike Map Preview — Styles */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: 'Segoe UI', system-ui, sans-serif; background: #1a1a2e; color: #e0e0e0; }
.app { display: flex; height: 100%; overflow: hidden; }

/* Map Panel */
.map-panel { flex: 1 1 65%; position: relative; min-width: 0; }
#map { width: 100%; height: 100%; }
.coords-overlay { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.7); color: #0f0; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-family: 'Cascadia Code','Fira Code',monospace; pointer-events: none; z-index: 1000; }

/* Compare */
.compare-handle { position: absolute; top: 0; bottom: 0; width: 4px; background: #e94560; z-index: 501; cursor: ew-resize; pointer-events: auto; }

/* Sidebar */
.sidebar { flex: 0 0 380px; background: #16213e; display: flex; flex-direction: column; border-left: 2px solid #0f3460; overflow: hidden; }
.sidebar-header { background: #0f3460; padding: 12px 16px; font-weight: 700; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #e94560; display: flex; align-items: center; gap: 8px; }
.sidebar-header .dot { width: 8px; height: 8px; border-radius: 50%; background: #4ecca3; }
.sidebar-header .dot.off { background: #e94560; }
.sidebar-header-right { margin-left: auto; font-size: 10px; color: #888; text-transform: none; letter-spacing: 0; font-weight: 400; }
.sidebar-content { flex: 1; overflow-y: auto; padding: 12px 16px; font-size: 13px; line-height: 1.6; }

/* Controls */
.sidebar select, .sidebar input[type="range"] { width: 100%; background: #0d1117; color: #e0e0e0; border: 1px solid #1a3a5c; border-radius: 3px; padding: 4px 8px; font-size: 12px; margin-top: 2px; }
.sidebar select:focus, .sidebar input[type="range"]:focus { outline: none; border-color: #e94560; }
.btn-row { display: flex; gap: 4px; }
.btn-row button { flex: 1; background: #0f3460; color: #e0e0e0; border: 1px solid #1a3a5c; border-radius: 3px; padding: 5px 8px; cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.btn-row button:hover { background: #e94560; }
.btn-row button.active { background: #4ecca3; color: #0d1117; }

/* Info Blocks */
.info-block { margin-bottom: 14px; }
.info-block label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #888; margin-bottom: 2px; }
.info-block .value { color: #4ecca3; font-family: 'Cascadia Code','Fira Code',monospace; font-size: 13px; }
.info-block .value.warn { color: #e9c46a; }
.opacity-val { float: right; font-family: 'Cascadia Code',monospace; font-size: 10px; color: #4ecca3; }
hr { border: none; border-top: 1px solid #1a3a5c; margin: 12px 0; }
.stats-row { display: flex; gap: 8px; }
.stats-row .info-block { flex: 1; margin-bottom: 0; }
.stats-row .value { font-size: 18px !important; }
.section-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #888; }
.shortcuts-hint { font-size: 9px; color: #555; text-align: center; margin-top: 8px; padding: 6px; border-top: 1px solid #1a3a5c; }
.shortcuts-hint kbd { color: #888; background: #0d1117; padding: 1px 4px; border-radius: 2px; border: 1px solid #1a3a5c; font-size: 9px; }

/* Log Table */
.log-table-wrap { background: #0d1117; border: 1px solid #1a3a5c; border-radius: 4px; max-height: 220px; overflow-y: auto; }
.log-table { width: 100%; border-collapse: collapse; font-family: 'Cascadia Code','Fira Code',monospace; font-size: 10px; color: #ccc; }
.log-table thead { position: sticky; top: 0; z-index: 1; }
.log-table th { background: #0f3460; color: #888; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 6px; text-align: left; font-size: 9px; }
.log-table td { padding: 2px 6px; border-bottom: 1px solid #1a2a44; white-space: nowrap; }
.log-table tr:hover td { background: #1a2a44; }
.log-table .status-ok { color: #4ecca3; } .log-table .status-err { color: #e94560; } .log-table .status-info { color: #5dade2; }
.log-table .td-src { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-table .td-count { text-align: right; color: #666; }
.render-badge { display: inline-block; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-family: 'Cascadia Code',monospace; }
.render-badge.fast { background: #1a4a2a; color: #4ecca3; } .render-badge.slow { background: #4a3a1a; color: #e9c46a; } .render-badge.timeout { background: #4a1a1a; color: #e94560; }

@media (max-width: 700px) { .app { flex-direction: column; } .map-panel { flex: 1 1 55%; } .sidebar { flex: 0 0 auto; max-height: 45%; border-left: none; border-top: 2px solid #0f3460; } }