.ra-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.ra-head {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ra-head h2 { font-size: 18px; margin: 0 0 6px; }
.ra-head p { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 0; }
.ra-list { display: grid; gap: 10px; }

.ra-row {
  align-items: end;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(190px, 1fr) minmax(220px, 1.4fr) auto;
  padding: 14px;
}

.ra-identity { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.ra-role, .ra-source {
  background: var(--info-bg);
  border-radius: 999px;
  color: var(--info);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
}
.ra-source { background: var(--ok-bg); color: var(--ok); }
.ra-source.is-off { background: var(--line-2); color: var(--muted); }
.ra-row label { display: grid; gap: 5px; }
.ra-row label span { color: var(--muted); font-size: 12px; font-weight: 700; }
.ra-row input {
  border: 1px solid var(--line);
  border-radius: 9px;
  min-width: 0;
  padding: 9px 10px;
}
.ra-status { color: var(--muted); font-size: 12px; grid-column: 2 / -1; margin: 0; min-height: 16px; }
.ra-status.is-ok { color: var(--ok); }
.ra-status.is-error, .ra-error { color: var(--err); }

/* READONLY accounts retain viewing controls while mutation affordances are hidden. */
body[data-role="viewer"] [data-open-cam-register],
body[data-role="viewer"] [data-cam-auto-register],
body[data-role="viewer"] [data-cam-discover-scan],
body[data-role="viewer"] [data-open-cred-update],
body[data-role="viewer"] [data-cam-edit],
body[data-role="viewer"] [data-cam-delete],
body[data-role="viewer"] [data-cam-refresh-metadata],
body[data-role="viewer"] [data-cam-alarm-fire],
body[data-role="viewer"] [data-cam-ptz-toggle],
body[data-role="viewer"] [data-cam-ptz-dir],
body[data-role="viewer"] [data-cam-ptz-zoom],
body[data-role="viewer"] [data-cam-ptz-stop],
body[data-role="viewer"] [data-open-feed-filter],
body[data-role="viewer"] [data-uev-make-rule],
body[data-role="viewer"] [data-ue-action-promote],
body[data-role="viewer"] [data-ue-reg-edit],
body[data-role="viewer"] #incidentAckNote,
body[data-role="viewer"] #incidentRealThreatBtn,
body[data-role="viewer"] #incidentFalseAlarmBtn,
body[data-role="viewer"] #incidentPreventiveAdd,
body[data-role="viewer"] #incidentResolutionSave,
body[data-role="viewer"] #alarmAckAll { display: none !important; }

@media (max-width: 720px) {
  .ra-card { padding: 14px; }
  .ra-row { align-items: stretch; grid-template-columns: 1fr; }
  .ra-status { grid-column: 1; }
}