/* ── Snippets ─────────────────────────────────────────────── */
.snippets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.snippet-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  animation: scaleIn 0.2s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
.snippet-card:hover,
.snippet-card:focus-within { border-color: var(--bg-hover); transform: translateY(-2px); }
.snippet-card.starred { border-color: rgba(240,178,50,0.4); }

.snippet-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg-tertiary);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.snippet-title { font-size: var(--text-sm); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snippet-lang {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--accent-light);
  color: var(--accent);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.snippet-star { color: var(--text-muted); background: none; border: none; padding: 2px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: color var(--transition-fast); border-radius: var(--radius-sm); }
.snippet-star.active { color: var(--warning); }
.snippet-star:hover { color: var(--warning); background: var(--bg-hover); }

.snippet-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--transition-fast); }
.snippet-actions .btn-ghost { color: var(--text-muted); }
.snippet-actions .btn-ghost:hover { color: var(--text-primary); background: var(--bg-hover); }
.snippet-card:hover .snippet-actions,
.snippet-card:focus-within .snippet-actions { opacity: 1; }

/* Code block */
.snippet-code-wrap { position: relative; min-width: 0; }
.snippet-code {
  overflow: auto;
  max-height: 200px;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: var(--space-4);
  background: var(--bg-darkest);
  margin: 0;
}
.snippet-code code { font-family: var(--font-mono); background: none; padding: 0; }
.snippet-modal-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); }

/* Copy button overlay */
.copy-btn-overlay {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px var(--space-2);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  opacity: 0;
  font-family: var(--font-sans);
  font-weight: 500;
}
.snippet-card:hover .copy-btn-overlay,
.snippet-card:focus-within .copy-btn-overlay { opacity: 1; }
.copy-btn-overlay:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.copy-btn-overlay.copied { background: var(--success); color: #fff; border-color: var(--success); }

/* Footer */
.snippet-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.snippet-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.snippet-tag {
  padding: 1px var(--space-2);
  background: var(--bg-hover);
  border-radius: var(--radius-full);
  font-size: 11px;
  color: var(--text-muted);
}
.snippet-date { font-size: 11px; color: var(--text-muted); }

/* Language colors */
.lang-js         { background: rgba(247,223,30,0.15); color: #f7df1e; }
.lang-ts         { background: rgba(49,120,198,0.15); color: #3178c6; }
.lang-html       { background: rgba(227,76,38,0.15);  color: #e34c26; }
.lang-css        { background: rgba(38,77,228,0.15);  color: #264de4; }
.lang-python     { background: rgba(53,114,165,0.15); color: #3572a5; }
.lang-json       { background: rgba(35,165,89,0.15);  color: var(--success); }
.lang-bash       { background: rgba(149,149,149,0.15);color: #949ba4; }
.lang-sql        { background: rgba(0,168,252,0.15);  color: var(--text-link); }
.lang-java       { background: rgba(176,114,25,0.15); color: #b07219; }
.lang-cs         { background: rgba(23,134,0,0.15);   color: #178600; }
.lang-go         { background: rgba(0,173,216,0.15);  color: #00add8; }
.lang-rust       { background: rgba(222,165,132,0.15);color: #dea584; }
.lang-php        { background: rgba(79,93,149,0.15);  color: #4f5d95; }
.lang-yaml       { background: rgba(203,50,44,0.15);  color: #cb322c; }
.lang-text       { background: var(--bg-hover); color: var(--text-muted); }

/* Highlight.js dark theme override */
.hljs { background: var(--bg-darkest) !important; color: var(--text-secondary); }

@media (max-width: 640px) {
  .snippets-grid { grid-template-columns: minmax(0, 1fr); }
  .snippet-header { align-items: flex-start; flex-wrap: wrap; gap: var(--space-2); }
  .snippet-title { flex-basis: 100%; white-space: normal; overflow-wrap: anywhere; }
  .snippet-actions,
  .copy-btn-overlay { opacity: 1; }
  .copy-btn-overlay { position: sticky; top: var(--space-2); float: right; }
  .snippet-footer { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .snippet-modal-grid { grid-template-columns: 1fr; }
}

@media (hover: none), (pointer: coarse) {
  .snippet-actions,
  .copy-btn-overlay {
    opacity: 1;
  }
  .snippet-card:hover {
    transform: none;
  }
}