:root {
  --speednet-color: #0ea5e9; /* change in Settings → Speednet UGC */
}

.speednet-ugc-form,
.speednet-ugc-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.speednet-ugc-form .field { margin-bottom: 14px; }
.speednet-ugc-form label { display:block; font-weight:600; margin-bottom:6px; }
.speednet-ugc-form input[type="text"],
.speednet-ugc-form textarea {
  width: 100%; border:1px solid #d1d5db; border-radius:10px; padding:10px;
}

.speednet-ugc-btn {
  background: var(--speednet-color);
  color:#fff; border:none; border-radius:999px; padding:10px 18px; cursor:pointer;
}

.muted { color:#6b7280; font-size: 13px; }

.speednet-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:18px; margin-top:18px;
}
.speednet-card { background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; transition:transform .2s ease }
.speednet-card:hover { transform: translateY(-2px); }
.speednet-card .thumb img { display:block; width:100%; height:auto; }
.speednet-card .title { font-size: 16px; margin: 10px 12px; }
.speednet-card .meta { color:#6b7280; font-size: 13px; margin: 0 12px 12px; }

.speednet-leaderboard { padding-left: 20px; }
.speednet-hashtag { color: var(--speednet-color); font-weight: 600; }