:root { color-scheme: light; font: 14px/1.45 system-ui, sans-serif; color: #24323c; background: #f5f4ef; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; gap: 16px; align-items: center; padding: 12px 24px; background: #203a43; color: #fff; }
h1 { margin: 0; font-size: 20px; }
header p { flex: 1; margin: 0; }
button { border: 0; border-radius: 5px; padding: 8px 12px; background: #2a9d8f; color: #fff; font: inherit; font-weight: 650; cursor: pointer; }
button:hover { background: #218276; }
button:disabled { cursor: wait; opacity: .65; }
main { padding: 16px; }
.map-panel { max-width: 1200px; margin: auto; }
canvas { display: block; width: 100%; height: auto; border: 1px solid #c4c8c1; border-radius: 8px; background: #132b39; cursor: pointer; }
#hover { min-height: 1.45em; margin: 8px 0; }
.overlay { position: fixed; z-index: 2; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(10, 23, 30, .68); }
.overlay[hidden] { display: none; }
.history-dialog { position: relative; width: min(720px, 100%); max-height: min(800px, calc(100vh - 40px)); overflow: auto; padding: 20px; border: 1px solid #a8bdc2; border-radius: 10px; background: #fff; box-shadow: 0 18px 52px rgba(0, 0, 0, .35); }
h2, h3 { margin: 0 0 10px; }
h3 { font-size: 15px; }
.history-dialog section { margin-top: 18px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 4px; border-bottom: 1px solid #ecefea; text-align: left; }
th { width: 45%; }
.history-list { margin: 0; padding-left: 21px; }
.history-list li { margin: 5px 0; }
.close { position: absolute; top: 10px; right: 10px; min-width: 34px; padding: 3px 9px; background: #5f7077; font-size: 22px; line-height: 1; }
#toast { position: fixed; z-index: 3; right: 18px; bottom: 18px; max-width: 350px; margin: 0; padding: 9px 12px; border-radius: 6px; background: #203a43; color: #fff; opacity: 0; pointer-events: none; transition: opacity .2s; }
#toast.visible { opacity: 1; }
@media (max-width: 650px) { header { align-items: flex-start; flex-wrap: wrap; } header p { flex-basis: 100%; order: 3; } main { padding: 8px; } }