/* ============ KERNEX panel.css — monitor widgets, map, owner tables, pair code ============ */

/* ---------- data items (sms/calls/etc) ---------- */
.item {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; margin-bottom: 8px;
}
.item .hdr { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.item .who { font-weight: 700; font-size: 13.5px; }
.item .ts { font-size: 11px; color: var(--mut); flex: none; }
.item .body { font-size: 13.5px; color: var(--tx2); margin-top: 4px; word-break: break-word; white-space: pre-wrap; }
.item img.shot { width: 100%; border-radius: 9px; margin-top: 6px; background: #000; }

/* ---------- usage bars ---------- */
.ubar { margin-bottom: 10px; }
.ubar .lbl { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.ubar .tr { height: 7px; background: var(--card2); border-radius: 99px; overflow: hidden; }
.ubar .tr i { display: block; height: 100%; background: var(--acc); border-radius: 99px; }

/* ---------- pair code ---------- */
.code {
  font-family: ui-monospace, Menlo, monospace; font-size: 16.5px; letter-spacing: 2.5px;
  background: var(--card2); border: 1px dashed var(--acc); border-radius: 11px;
  padding: 13px; text-align: center; word-break: break-all; font-weight: 700;
}

/* ---------- tables (owner) ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th { color: var(--tx2); text-align: left; font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 8px; border-bottom: 1px solid rgba(34, 48, 73, .5); vertical-align: top; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- map ---------- */
#map { height: 52vh; border-radius: var(--rad); border: 1px solid var(--line); z-index: 1; }