/* public/components/templates/templates.css */

.templates-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (max-width: 768px) {
  .templates-grid {
    grid-template-columns: 1fr;
  }
}

.template-card {
  background: var(--bg3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all .2s ease;
}

.template-card:hover {
  border-color: var(--line2);
  transform: translateY(-1px);
}

.template-card-icon {
  font-size: 22px;
  margin-bottom: 8px;
}

.template-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.template-card-desc {
  font-size: 11px;
  color: var(--text2);
  line-height: 1.5;
}

.template-detail {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--text2);
  white-space: pre-wrap;
}