* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 14px/1.4 system-ui, sans-serif; color: #1f2937; background: #f3f4f6; }
body { display: flex; }
button { cursor: pointer; padding: 5px 12px; border: 1px solid #9ca3af; border-radius: 4px; background: #fff; }
button:hover { background: #e5e7eb; }

/* sidebar */
#sidebar { width: 220px; flex-shrink: 0; background: #111827; color: #e5e7eb; display: flex; flex-direction: column; padding: 14px 0; }
#sidebar h1 { font-size: 17px; margin: 0 16px 16px; }
#sidebar h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; margin: 0 16px 6px; }
#files { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
#files li { padding: 8px 16px; cursor: pointer; word-break: break-all; border-left: 3px solid transparent; }
#files li:hover { background: #1f2937; }
#files li.active { background: #1f2937; border-left-color: #3b82f6; color: #fff; font-weight: 600; }
#files .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
#files .dot.live { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
#files .dot.stale { background: #ef4444; }
.logout { padding: 12px 16px 0; border-top: 1px solid #374151; display: flex; justify-content: space-between; align-items: center; }

/* main */
main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 12px; gap: 10px; }
#toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; background: #fff; padding: 10px 14px; border-radius: 6px; }
#title { font-size: 16px; }
#range { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#range input { padding: 4px; }
#status { color: #6b7280; margin-left: auto; }
#status.err { color: #b91c1c; }
#summary { background: #fff; padding: 8px 14px; border-radius: 6px; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
#summary b { color: #6b7280; font-weight: 500; }
#map { height: 48vh; min-height: 300px; border-radius: 6px; }
#charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 10px; }
.chart { background: #fff; border-radius: 6px; padding: 8px 10px; min-width: 0; }
.chart h3 { margin: 0 0 4px; font-size: 14px; }

/* login */
.login-page { align-items: center; justify-content: center; }
.login-box { background: #fff; padding: 28px; border-radius: 8px; width: 320px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.login-box h1 { margin: 0; font-size: 20px; }
.login-box label { display: flex; flex-direction: column; gap: 4px; }
.login-box input { padding: 8px; border: 1px solid #d1d5db; border-radius: 4px; }
.login-box button { padding: 9px; background: #2563eb; color: #fff; border: none; }
.error { color: #b91c1c; margin: 0; }