* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.4 system-ui, sans-serif; color: #1a1a2e; background: #f4f5f7; }
nav { display: flex; gap: 4px; padding: 8px; background: #1a1a2e; position: sticky; top: 0; z-index: 1100; }
nav a { color: #cfd2e3; text-decoration: none; padding: 8px 14px; border-radius: 8px; }
nav a.active, nav a:hover { background: #33335c; color: #fff; }
nav .spacer { flex: 1; }
#map { height: calc(100vh - 52px); }
.panel { padding: 12px; max-width: 900px; margin: 0 auto; }
table { border-collapse: collapse; width: 100%; background: #fff; }
th, td { border: 1px solid #ddd; padding: 8px 10px; text-align: left; }
th { background: #eceef3; }
.login-box { max-width: 320px; margin: 15vh auto; padding: 24px; background: #fff; border-radius: 12px; display: grid; gap: 10px; }
.login-box input, .login-box button, select, input[type=date], input[type=month] { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; }
.login-box button, button.act { background: #2453ff; color: #fff; border: none; cursor: pointer; }
.err { color: #c0392b; }
.stale { color: #c0392b; font-weight: 600; }
@media (max-width: 600px) { nav a { padding: 8px 10px; font-size: 14px; } }