/* Blog interactions: local browser based counters/comments */
.post-interactions {
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--r, 18px);
  border: var(--border, 1px solid rgba(182, 107, 255, 0.22));
  background: rgba(18, 8, 38, 0.78);
  backdrop-filter: blur(10px);
  box-shadow: var(--glow, 0 0 18px rgba(182, 107, 255, 0.5));
}
.post-interactions h2,
.post-interactions h3 {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  color: var(--p, #b66bff);
  text-shadow: var(--glow, 0 0 18px rgba(182, 107, 255, 0.5));
  margin: 0 0 12px;
  line-height: 1.5;
}
.interaction-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--m, #b8a6d9);
  font-size: 13px;
  margin-bottom: 12px;
}
.interaction-stats span {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(182,107,255,0.14);
  background: rgba(11,6,22,0.35);
}
.interaction-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.interaction-actions button,
.comment-form button {
  padding: 9px 12px;
  border-radius: 999px;
  border: var(--border, 1px solid rgba(182,107,255,0.22));
  background: rgba(182,107,255,0.08);
  color: var(--t, #f5edff);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.interaction-actions button:hover,
.comment-form button:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow, 0 0 18px rgba(182,107,255,0.5));
}
.interaction-actions button.active {
  border-color: rgba(255,92,244,0.6);
  box-shadow: 0 0 14px rgba(255,92,244,0.25);
}
.comment-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(182,107,255,0.20);
  background: rgba(11,6,22,0.58);
  color: var(--t, #f5edff);
  font-family: 'Space Grotesk', sans-serif;
  outline: none;
}
.comment-form textarea {
  min-height: 100px;
  resize: vertical;
}
.comments-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.comment-empty,
.comment-note {
  color: var(--m, #b8a6d9);
  line-height: 1.6;
  font-size: 13px;
}
.comment-item {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(182,107,255,0.14);
  background: rgba(11,6,22,0.42);
}
.comment-head {
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:6px;
}
.comment-head strong { color: var(--t, #f5edff); }
.comment-head span { color: var(--m, #b8a6d9); font-size: 12px; }
.comment-item p { margin: 0; color: var(--m, #b8a6d9); line-height: 1.55; }
.card-stats {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:var(--m, #b8a6d9);
  font-size:12px;
  margin:0 0 12px;
  opacity:.95;
}