* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0a0a0a; color: #d0d0d0; font: 14px/1.45 system-ui, sans-serif; }
.hidden { display: none !important; }

header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #111; border-bottom: 1px solid #1e3a1e; position: sticky; top: 0; z-index: 20; flex-wrap: wrap; }
.brand { color: #00ff41; font-weight: 700; font-size: 17px; }
nav { display: flex; gap: 2px; flex-wrap: wrap; }
nav a { color: #9f9f9f; text-decoration: none; padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
nav a:hover { color: #fff; }
nav a.active { color: #000; background: #00ff41; font-weight: 600; }
.spacer { flex: 1; }
select, input, button, textarea { background: #161616; color: #d0d0d0; border: 1px solid #2a2a2a; border-radius: 6px; padding: 7px 10px; font-size: 13px; }
button { cursor: pointer; }
button:hover { border-color: #00ff41; }
button.primary { background: #00ff41; color: #000; border: none; font-weight: 600; }
button.small { padding: 4px 10px; font-size: 12px; }
input { min-width: 180px; }

main { padding: 12px; max-width: 1200px; margin: 0 auto; }
.view { display: none; }
.view.active { display: block; }

.card { background: #111; border: 1px solid #1e1e1e; border-radius: 10px; padding: 12px; margin-bottom: 10px; }
.card h3 { color: #00ff41; font-size: 14px; margin-bottom: 8px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.entry { background: #111; border-radius: 8px; padding: 10px; margin: 6px 0; border-left: 3px solid #333; white-space: pre-wrap; word-break: break-word; }
.entry .t { color: #666; font-size: 11px; }
.entry.sms { border-color: #25d366; } .entry.call { border-color: #ffb300; } .entry.loc { border-color: #66bb6a; }
.entry.notif { border-color: #ff3b30; } .entry.screen { border-color: #b39ddb; } .entry.typed { border-color: #4fc3f7; }
.entry.app { border-color: #ff9800; } .entry.status { border-color: #555; } .entry.photo { border-color: #e91e63; }
.entry.alert { border-color: #ff1744; background: #1c0f0f; }
.entry img.thumb { max-width: 100%; border-radius: 6px; margin-top: 6px; cursor: pointer; }
.chip { display: inline-block; padding: 4px 10px; border-radius: 14px; background: #161616; border: 1px solid #2a2a2a; cursor: pointer; font-size: 12px; color: #9f9f9f; }
.chip.active { background: #00ff41; color: #000; font-weight: 600; border-color: #00ff41; }
.chat-head { color: #00ff41; font-weight: 600; background: #142a14; padding: 9px 12px; border-radius: 8px; cursor: pointer; margin-top: 8px; }
.chat-body { display: none; }
.chat-body.open { display: block; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.grid img { width: 100%; height: 150px; object-fit: cover; border-radius: 8px; cursor: pointer; background: #111; }
.gap-line { color: #555; font-size: 12px; text-align: center; padding: 8px; font-style: italic; }
.msg { color: #00ff41; font-size: 12px; margin-top: 6px; }
.msg.err { color: #ff6b6b; }
table { width: 100%; border-collapse: collapse; }
td, th { padding: 6px 8px; border-bottom: 1px solid #1c1c1c; text-align: left; font-size: 13px; }
th { color: #00ff41; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; z-index: 100; }
.lightbox img { max-width: 94vw; max-height: 94vh; border-radius: 8px; }
.lb-close { position: absolute; top: 14px; right: 20px; font-size: 26px; color: #fff; cursor: pointer; }
.login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #0a0a0a; z-index: 50; }
.login-box { background: #111; padding: 28px; border-radius: 14px; border: 1px solid #1e3a1e; display: flex; flex-direction: column; gap: 10px; width: 300px; }
.login-box h2 { color: #00ff41; }
#mapFrame { width: 100%; height: 75vh; border: 0; border-radius: 10px; background: #111; }
.alert-item { border-left: 4px solid #ff1744; background: #1c0f0f; }
.badge { background: #ff1744; color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 11px; }
.live-row { display: flex; gap: 6px; margin-bottom: 8px; }
@media (max-width: 700px) { nav a { font-size: 11px; padding: 5px 7px; } }