* { box-sizing: border-box; margin: 0; }
body { font-family: system-ui, -apple-system, "Noto Sans TC", sans-serif; background: #f4f6f8; color: #1c2733; }
#app { display: flex; flex-direction: column; height: 100vh; }
header { padding: 12px 20px; background: #10375c; color: #fff; }
header h1 { font-size: 20px; }
header p { font-size: 13px; opacity: .85; }
main { flex: 1; display: flex; min-height: 0; }
#map { flex: 1; min-width: 0; }
aside { width: 280px; background: #fff; border-left: 1px solid #dde4ea; overflow-y: auto; padding: 14px; }
aside h2 { font-size: 15px; margin-bottom: 10px; }
#list { list-style: none; padding: 0; }
#list li { padding: 8px 10px; border: 1px solid #e3e9ee; border-radius: 8px; margin-bottom: 8px; cursor: pointer; }
#list li:hover { border-color: #10375c; background: #f0f5fa; }
#list .t { font-weight: 600; font-size: 14px; }
#list .n { font-size: 12px; color: #5b6b7b; }
#list .del { float: right; border: 0; background: none; color: #c0392b; cursor: pointer; font-size: 14px; }
.hint { font-size: 11px; color: #8a97a5; margin-top: 12px; }
#form.hidden { display: none; }
#form { position: fixed; z-index: 1000; left: 50%; top: 80px; transform: translateX(-50%);
  background: #fff; border-radius: 10px; box-shadow: 0 8px 30px rgba(16,55,92,.25); padding: 14px; width: 300px; display: flex; flex-direction: column; gap: 8px; }
#form h3 { font-size: 14px; }
#form h3 span { font-weight: 400; color: #8a97a5; font-size: 12px; }
#form input, #form textarea { width: 100%; padding: 7px 9px; border: 1px solid #ccd6df; border-radius: 6px; font: inherit; }
#form button { padding: 7px 14px; border: 0; border-radius: 6px; background: #10375c; color: #fff; cursor: pointer; }
#form button.ghost { background: #e6ebf0; color: #1c2733; }
.leaflet-popup-content b { font-size: 14px; }