* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #12100c; color: #e8dcc0;
  font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px;
  min-height: 100vh; display: flex; flex-direction: column;
}
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px; background: #1d1912; border-bottom: 2px solid #6b5a2e;
}
h1 { font-size: 20px; letter-spacing: 2px; color: #e8c95a; font-weight: 800; }
h1 span { color: #8a7a4a; font-weight: 400; }
.hdr-right { display: flex; gap: 14px; align-items: center; }
#summary { color: #8a7a4a; font-size: 13px; }
button {
  background: #6b5a2e; color: #fff; border: 0; padding: 8px 18px;
  border-radius: 4px; cursor: pointer; font-weight: 700; letter-spacing: 1px;
}
button:hover { background: #8a7340; }
main { flex: 1; padding: 18px 20px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 1100px; }
th, td { padding: 8px 10px; text-align: right; white-space: nowrap; }
th {
  background: #241f15; color: #b8a05a; font-size: 11px; letter-spacing: 1px;
  border-bottom: 1px solid #6b5a2e; text-align: right;
}
th:nth-child(1), th:nth-child(2), th:nth-child(3),
td:nth-child(1), td:nth-child(2), td:nth-child(3) { text-align: left; }
tbody tr { border-bottom: 1px solid #2a2419; }
tbody tr:hover { background: #1d1912; }
.dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.on  { background: #4caf50; box-shadow: 0 0 6px #4caf50; }
.off { background: #c0392b; }
.mname { font-weight: 700; color: #f0e6c8; }
.msub  { color: #8a7a4a; font-size: 11px; }
.jp { font-size: 12px; line-height: 1.5; }
.jp b { color: #e8c95a; }
.empty, .error { text-align: center; padding: 40px; color: #8a7a4a; font-size: 16px; }
.error { color: #e74c3c; }
footer { padding: 10px 20px; color: #5a4e33; font-size: 11px; border-top: 1px solid #241f15; }
td.neg { color: #e74c3c; } td.pos { color: #4caf50; }