.keys-hero-island {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--sys-surface-lowest);
  border-radius: var(--radius-lg);
  padding: 18px 24px;
  margin-bottom: 16px;
}

.keys-grid-canvas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

.key-profile-card {
  background-color: var(--sys-surface-lowest);
  border-radius: var(--radius-xl);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: transform var(--trans-fast);
}
.key-profile-card:hover { transform: translateY(-2px); }

.key-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.key-title-wrap h3 { font-size: 16px; font-weight: 600; color: var(--sys-text); }
.key-desc-text { font-size: 12px; color: var(--sys-text-muted); margin-top: 4px; }

.key-params-box {
  background-color: var(--sys-surface-low);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.param-row { display: flex; flex-direction: column; gap: 2px; }
.param-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--sys-text-subtle); }
.param-value { font-family: var(--font-mono); font-size: 12px; color: var(--sys-primary); word-break: break-all; }

.key-card-footer { display: flex; justify-content: flex-end; gap: 8px; }