/* basic, simple and clean styles (SEO-friendly markup) */

.ts-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  padding: 16px;
}

.ts-topic-card {
  position: relative;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #eee;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 140px;
}

.ts-topic-card .ts-image-link { display:block; }
.ts-topic-card img.ts-thumb {
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

.ts-card-body { padding: 12px; flex:1; }
.ts-title { font-size: 18px; margin: 0 0 8px; line-height:1.2; }
.ts-title a { color: #222; text-decoration: none; }
.ts-desc { color:#666; margin:0; font-size:14px; }

.ts-badge {
  position:absolute;
  left:8px; top:8px;
  background:#ff6b6b; color:#fff;
  padding:4px 8px;
  border-radius:4px;
  font-size:12px;
}

.ts-pending { opacity: 0.85; }

/* loader */
.ts-loader { text-align:center; padding:16px; color:#777; }

/* admin form / table minor improvements */
.ts-add-topic-form input[type="text"], .ts-add-topic-form textarea {
  width:100%; padding:8px; border:1px solid #ddd; border-radius:4px;
}
.ts-success { background:#e7f8ea; padding:8px; border:1px solid #bfe6c8; border-radius:4px; margin-bottom:12px; }
.ts-error { background:#ffecec; padding:8px; border:1px solid #f5c2c2; border-radius:4px; margin-bottom:12px;}