:root { --bg:#0e0f11; --fg:#e9e9ee; --muted:#9aa0a6; --accent:#6ee7ff; --ok:#7bd88f; --warn:#ffd166; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--fg);
  background: radial-gradient(1200px 800px at 20% -20%, #14213d 0, #0e0f11 45%);
}

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
h1 { font-size: 18px; margin: 0; }
.controls { display: flex; gap: 12px; align-items: center; }
.controls input[type="text"] { padding: 6px 8px; background: #15171a; color: var(--fg); border: 1px solid #2a2d33; border-radius: 6px; }
.badge { padding: 4px 8px; background: #1a1d23; border: 1px solid #2a2d33; border-radius: 999px; color: var(--muted); }

a.btn {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #2a2d33;
  border-radius: 6px;
  background: #171a1f;
  color: var(--fg);
  text-decoration: none;
}
a.btn:hover { border-color: #39404a; }

main {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  padding: 16px; height: calc(100vh - 60px);
}
section { background: #101216; border: 1px solid #1f232b; border-radius: 10px; display: flex; flex-direction: column; }
section h2 { font-size: 16px; margin: 10px 12px; color: var(--accent); }
ul { list-style: none; margin: 0; padding: 8px 12px; overflow: auto; }

.row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.row .meta { color: var(--muted); font-size: 13px; }
.row .msg { white-space: pre-wrap; }
.row .actions { display: flex; align-items: center; gap: 8px; }
.row button { padding: 6px 10px; border: 1px solid #2a2d33; border-radius: 6px; background: #171a1f; color: var(--fg); cursor: pointer; }
.row button:hover { border-color: #39404a; }
.row.acked { opacity: 0.6; }
.row.acked .meta::after { content: " • ACKED"; color: var(--ok); }