/* /#/paper + /#/system — read-only monitoring. Scoped .pm-* agar tidak
   menyentuh gaya halaman lain. */
.pm-page { display: flex; flex-direction: column; gap: 18px; }
.pm-card { padding: 20px 22px; }

.pm-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .14); color: var(--muted, #8b93a7);
  background: rgba(255, 255, 255, .04);
}
.pm-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; opacity: .8;
}
.pm-badge[data-state="online"] { color: #9ad64b; border-color: rgba(154, 214, 75, .45); background: rgba(154, 214, 75, .08); }
.pm-badge[data-state="stale"] { color: #ffb020; border-color: rgba(255, 176, 32, .45); background: rgba(255, 176, 32, .08); }
.pm-badge[data-state="offline"] { color: #ff6b6b; border-color: rgba(255, 107, 107, .45); background: rgba(255, 107, 107, .09); }

.pm-tablewrap { overflow-x: auto; margin: 0 -4px; }
.pm-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pm-table th {
  text-align: left; padding: 9px 10px; font-weight: 600;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted, #8b93a7); border-bottom: 1px solid rgba(255, 255, 255, .1);
  white-space: nowrap;
}
.pm-table td {
  padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap;
}
.pm-table tbody tr:hover td { background: rgba(255, 255, 255, .03); }
.pm-table .pm-empty { color: var(--muted, #8b93a7); font-family: inherit; text-align: center; padding: 18px; }

.pm-code {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(0, 0, 0, .32); border: 1px solid rgba(255, 255, 255, .08);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem; line-height: 1.6; color: #cfd6e4; overflow-x: auto; white-space: pre-wrap;
  word-break: break-all;
}
.pm-note {
  margin-top: 12px; font-size: .76rem; color: #ffb3b3;
  background: rgba(255, 60, 60, .08); border: 1px solid rgba(255, 90, 90, .3);
  border-radius: 10px; padding: 9px 12px;
}
.pm-note.info { color: #9fb4d8; background: rgba(90, 140, 255, .08); border-color: rgba(120, 170, 255, .28); }
.pm-keys { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pm-keys li {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem; padding: 8px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .07);
}
.pm-keys .pm-empty { font-family: inherit; color: var(--muted, #8b93a7); text-align: center; }
.pm-kill-on { color: #ff8f8f !important; }