.prompts-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;
}

.hero-meta h2 { font-size: 18px; font-weight: 600; color: var(--sys-text); }
.hero-meta p { font-size: 12px; color: var(--sys-text-muted); margin-top: 2px; }
.hero-actions-cluster { display: flex; gap: 10px; }

.prompts-canvas-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.prompt-organic-card {
  background-color: var(--sys-surface-lowest);
  border-radius: var(--radius-xl);
  padding: 18px;
  display: flex;
  flex-direction: column;
}

.card-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.heading-badge { display: flex; align-items: center; gap: 8px; }
.badge-icon-sys { color: var(--sys-primary); }
.badge-icon-tech { color: var(--sys-tertiary); }

.snippets-stack { display: flex; flex-direction: column; gap: 8px; min-height: 280px; }

.snippet-soft-capsule {
  background-color: var(--sys-surface-low);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all var(--trans-fast);
}
.snippet-soft-capsule:hover { background-color: var(--sys-surface); transform: translateX(3px); }

.capsule-content-meta { display: flex; flex-direction: column; gap: 4px; }
.capsule-filename { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: var(--sys-text); }
.capsule-preview { font-size: 11px; color: var(--sys-text-muted); max-width: 320px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.capsule-actions { display: flex; gap: 4px; }

.organic-textarea {
  width: 100%;
  background-color: var(--sys-surface);
  color: var(--sys-text);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 16px;
  resize: vertical;
}

.organic-input {
  width: 100%;
  background-color: var(--sys-surface);
  color: var(--sys-text);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
}

.preview-code-block {
  background-color: var(--sys-surface);
  border-radius: var(--radius-md);
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  white-space: pre-wrap;
  max-height: 480px;
  overflow-y: auto;
}

.key-top-island {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--sys-surface-low);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}
.key-top-island input { background: transparent; color: inherit; width: 140px; font-size: 12px; }

.empty-state-text { color: var(--sys-text-subtle); font-size: 12px; padding: 16px; }