* { 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; }

/* login */
.login {
  position: fixed; inset: 0; background: #12100c;
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.login[hidden] { display: none; }
.login-card {
  width: 340px; background: #1d1912; border: 2px solid #6b5a2e;
  border-radius: 12px; padding: 34px 30px; text-align: center;
}
.login-card h1 { margin-bottom: 26px; }
.login-card input {
  width: 100%; margin-bottom: 12px; padding: 12px;
  background: #000; color: #e8c95a; border: 1px solid #6b5a2e;
  border-radius: 6px; font-size: 15px; text-align: center;
  letter-spacing: 1px; box-sizing: border-box;
}
.login-card button { width: 100%; padding: 12px; }
.err { color: #e74c3c; font-size: 13px; min-height: 18px; margin-top: 10px; }
button.ghost { background: transparent; border: 1px solid #6b5a2e; color: #b8a05a; }
button.ghost:hover { border-color: #b8a05a; color: #fff; }

/* admin panel */
#adminPanel {
  background: #1d1912; border: 1px solid #6b5a2e; border-radius: 8px;
  padding: 14px 18px; margin-bottom: 18px;
}
#adminPanel h2 { font-size: 13px; color: #b8a05a; letter-spacing: 2px; margin-bottom: 10px; }
.adminbar { display: flex; gap: 8px; margin-bottom: 10px; }
.adminbar input {
  padding: 8px 10px; background: #000; color: #e8c95a;
  border: 1px solid #6b5a2e; border-radius: 4px; font-size: 13px;
}
.adminbar button { padding: 8px 14px; }
.chip {
  display: inline-block; background: #241f15; border: 1px solid #6b5a2e;
  border-radius: 20px; padding: 5px 14px; margin: 3px; font-size: 13px; color: #e8dcc0;
}
.chip i { color: #8a7a4a; font-style: normal; }
.chip a { color: #e74c3c; text-decoration: none; margin-left: 6px; font-weight: bold; }
.selClient {
  background: #000; color: #e8c95a; border: 1px solid #6b5a2e;
  border-radius: 4px; padding: 4px 6px; font-size: 12px; max-width: 150px;
}