.role-help {
  grid-column: 1 / -1;
  color: #777;
  font-size: 12px;
  line-height: 1.55;
}

.security-stats { display: grid; gap: 14px; }
.security-stats h3 { margin: 4px 0 -6px; font-size: 14px; }
.security-period { margin: 0; color: #888; font-size: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat-grid > div { min-height: 70px; display: grid; align-content: center; gap: 4px; padding: 10px; border: 1px solid #e8e8e8; border-radius: 5px; background: #fafafa; }
.stat-grid b { font-size: 20px; color: #333; }
.stat-grid small { color: #777; font-size: 12px; }
.stat-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.stat-list span { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #f6f6f6; border-radius: 4px; color: #555; font-size: 13px; }
.stat-list b { color: #333; }
.danger-stats span { background: #fff5f4; }
.danger-stats b { color: #b22727; }
.security-events { max-height: 240px; overflow: auto; border-top: 1px solid #eee; }
.security-events p { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 4px 10px; margin: 0; padding: 9px 2px; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.security-events time, .security-events small { color: #888; font-size: 11px; }
.security-events small { grid-column: 2; overflow-wrap: anywhere; }

@media (max-width: 420px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .security-events p { grid-template-columns: 1fr; gap: 3px; }
  .security-events small { grid-column: auto; }
}