.map-container{display:flex;height:100%;width:100%;position:relative;overflow:hidden}#control-panel{width:400px;max-width:100%;padding:20px;background:#fff;overflow-y:auto;box-shadow:0 0 10px #0000001a;display:flex;flex-direction:column;z-index:20;position:relative}#map{flex-grow:1;height:100%;width:100%}.map-h1{font-size:1.5em;margin-top:0;color:#333;margin-bottom:20px}.form-group{margin-bottom:15px}.map-label{display:block;margin-bottom:5px;font-weight:500;color:#555}.map-select,.map-input[type=text]{width:100%;padding:8px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}.button-primary{background-color:#1a73e8;color:#fff;border:none;padding:10px 15px;border-radius:4px;cursor:pointer;width:100%;font-size:1em;font-weight:500}.button-primary:hover{background-color:#1669c8}.button-secondary{background-color:#f1f3f4;color:#3c4043;border:1px solid #dadce0;padding:8px 12px;border-radius:4px;cursor:pointer;margin-top:10px;margin-bottom:15px;width:100%}.button-secondary:hover{background-color:#e8eaed}#route-info{margin-top:20px;padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #1a73e8}.route-logs{margin-top:20px;flex-grow:1;display:flex;flex-direction:column}.route-logs h2{font-size:1.2em;border-bottom:1px solid #eee;padding-bottom:5px;margin-top:15px;color:#333}.route-logs ul{list-style-type:none;padding:0;margin:0;overflow-y:auto;max-height:200px}.route-logs li{padding:10px;border-bottom:1px solid #f0f0f0;cursor:pointer;font-size:.9em;color:#555}.route-logs li:hover{background-color:#f8f9fa;color:#1a73e8}.route-logs li.active{background-color:#e8f0fe}#message-box{margin-top:15px;padding:10px;border-radius:4px;display:none}.message-error{background-color:#fdeaed;color:#a50e0e;border:1px solid #f5c6cb}.message-info{background-color:#e8f0fe;color:#1a73e8;border:1px solid #d2e3fc}.waypoint-item{display:flex;align-items:center;gap:8px;margin-bottom:10px}.waypoint-item>div{flex-grow:1}.remove-waypoint-btn{background:none;border:none;cursor:pointer;padding:4px;color:#757575}.remove-waypoint-btn:hover{color:#d93025;background-color:#fce8e6;border-radius:50%}gmp-place-autocomplete{width:100%}.checkbox-group{display:flex;align-items:center;gap:8px}.live-marker-icon{width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}@media (max-width: 768px){.map-container{flex-direction:column-reverse}#control-panel{width:100%;height:40%;max-height:40vh}#map{height:60%}}