* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: #f2f4f7; color: #222; }
.box { max-width: 820px; margin: 30px auto; background: #fff; padding: 24px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.box.narrow { max-width: 380px; }
h1 { font-size: 22px; margin: 0 0 18px; }
h2 { font-size: 17px; margin: 30px 0 10px; }
.top { display: flex; justify-content: space-between; align-items: baseline; }
label { display: block; margin-bottom: 12px; font-weight: bold; font-size: 14px; }
input[type=text], input[type=date], input[type=password] { display: block; width: 100%; padding: 8px; margin-top: 4px; font-size: 15px; border: 1px solid #bbb; border-radius: 4px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.row label { flex: 1; min-width: 200px; }
button { background: #1565c0; color: #fff; border: 0; padding: 9px 18px; font-size: 15px; border-radius: 4px; cursor: pointer; }
button:hover { background: #0d47a1; }
button.danger { background: #c62828; padding: 5px 10px; font-size: 13px; }
.err { background: #fdecea; color: #b71c1c; padding: 10px; border-radius: 4px; }
.err-inline { color: #b71c1c; }
.ok { background: #e8f5e9; padding: 12px; border-radius: 4px; margin-bottom: 20px; }
.copy { display: flex; gap: 8px; }
.copy input { margin: 0; }
.choices { margin-bottom: 12px; }
.choice { font-weight: normal; margin-bottom: 4px; }
.small { font-size: 12px; color: #666; }
code { font-size: 11px; word-break: break-all; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 6px; border-bottom: 1px solid #eee; }
td form { margin: 0; }

.map-page { height: 100vh; display: flex; flex-direction: column; }
.infobar { padding: 10px 16px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; z-index: 1000; }
#map { flex: 1; }