*{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
html,body,#app{height:100%;margin:0}
#app{display:flex}
#map{flex:1;height:100vh}
#sidebar{width:360px;padding:12px;background:#f8f8f8;overflow:auto;border-left:1px solid #ddd}
#sidebar h1{margin-top:0}
label{display:block;margin:6px 0}
input,select{width:100%;padding:6px;margin-top:4px}
.buttons{display:flex;gap:8px;margin-top:8px}
.buttons button{flex:1;padding:8px}
.search-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.search-row .searchbox{flex:1}
.search-row .locateBtn{flex:0 0 auto;padding:8px}
.add-row{margin-top:8px}
.add-row .addBtn{width:100%;padding:10px}
.add-row label input[type=number]{width:80px}
.travel-toggle{font-size:14px;margin-bottom:6px}
.travel-toggle input{margin-right:6px}
.travel-info{background:#f0f7ff;border:1px solid #dfeffc;padding:8px;border-radius:6px;font-size:13px;color:#083a66}
.copyTravelBtn{margin-left:8px;padding:6px 10px;background:#0b6d0b;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:13px}
.copyTravelBtn:active{transform:translateY(1px)}
.add-actions{display:flex;gap:8px}
.add-actions .addBtn{flex:1}
.cancelBtn{flex:0 0 auto;padding:8px;background:#ddd;border:0;border-radius:4px;cursor:pointer}
.search-results{position:relative;margin-top:6px;border:1px solid #eee;background:#fff;max-height:220px;overflow:auto;font-size:14px;border-radius:4px}
.searchRow{padding:8px 10px;border-bottom:1px solid #f0f0f0;cursor:pointer}
.searchRow:hover{background:#f6f6f6}
.stale-notice{margin-top:6px;padding:6px;background:#fff8e1;border:1px solid #f0e6b6;color:#725d00;border-radius:4px;font-size:13px}
.search-spinner{display:inline-block;margin-top:6px;padding:6px 8px;background:#f0f6ff;border:1px solid #d4e4ff;border-radius:4px;color:#165ead;font-size:13px}
.selected-place{margin-top:8px;font-size:13px;color:#333}
.clearBtn{background:transparent;border:0;color:#c00;cursor:pointer;margin-left:8px}
.form-error{color:#c00;font-size:13px;margin-top:6px}
#itinerary{margin-top:12px}
#itinerary h3{margin:10px 0 4px}
ol{padding-left:18px}
li{margin:6px 0;padding:6px;background:#fff;border:1px solid #e6e6e6}
.dayList{min-height:30px}
li[draggable='true']{cursor:grab}
.meta{font-size:12px;color:#555;margin-top:6px}
.distance{font-size:13px;color:#333;margin-top:6px}
.footer{margin-top:12px}
.save-result{background:#f6ffef;border:1px solid #d9f0c8;padding:8px;border-radius:6px}
.save-result a{color:#0b6d0b;text-decoration:underline}
.save-result .copyBtn{margin-left:8px;padding:4px 8px;background:#0b6d0b;color:#fff;border:0;border-radius:4px;cursor:pointer;font-size:13px}
button.del{background:transparent;border:0;color:#c00;cursor:pointer}

/* Popup form at bottom-left */
.stop-popup{position:fixed;left:20px;bottom:20px;width:340px;max-height:80vh;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.12);border-radius:8px;padding:12px;z-index:1000;overflow:auto;transition:transform .2s ease,opacity .2s ease}
.stop-popup .popup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.popup-toggle{background:transparent;border:0;font-size:18px;cursor:pointer;padding:4px}
.stop-popup.collapsed{height:40px;max-height:40px;width:160px;overflow:hidden}
@media (max-width:700px){.stop-popup{left:10px;right:10px;width:auto;bottom:10px}.stop-popup.collapsed{width:120px}}

/* Responsive layout for smaller screens */
@media (max-width: 700px) {
  #app {
    flex-direction: column;
  }
  #map {
    height: 50vh;
    order: 1;
  }
  #sidebar {
    width: 100%;
    height: 50vh;
    order: 2;
    border-left: none;
    border-top: 1px solid #ddd;
    overflow: auto;
  }
}