:root {
  --bg: #01021e;
  --card: rgba(255,255,255,0.03);
  --border: rgba(255,255,255,0.08);
  --flow: linear-gradient(135deg,#df29d3,#6e22ff,#4da8da,#17b2e2);
  --pink:#df29d3;
  --blue:#0a90f6;
  --cyan:#17b2e2;
  --text:#ffffff;
  --muted:#cfd6ff;
}

.tla-forum-wrapper {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text);
  background: radial-gradient(ellipse at 20% 40%, #1b1d3c 0%, #0a0b2a 100%);
  padding: 40px 20px 60px;
}

.tla-forum-hero {
  background: #010012;
  border-radius: 20px;
  padding: 30px 30px 25px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  margin-bottom: 30px;
}
.tla-forum-hero::before {
  content:'';
  position:absolute;
  inset:-40%;
  background: radial-gradient(circle at 0 0, rgba(223,41,211,0.25), transparent 60%),
              radial-gradient(circle at 100% 100%, rgba(23,178,226,0.25), transparent 60%);
  opacity:0.9;
}
.tla-forum-hero-content,
.tla-forum-hero-stats {
  position:relative;
  z-index:2;
}
.tla-forum-hero h1 {
  font-size: 42px;
  margin-bottom: 10px;
  background: var(--flow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tla-forum-hero p {
  color: var(--muted);
  font-size: 16px;
}

.tla-forum-hero-stats {
  display:flex;
  gap:16px;
  margin-top:20px;
}
.tla-forum-stat {
  flex:1;
  padding:10px 14px;
  border-radius:14px;
  background: rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
}
.tla-forum-stat .label {
  display:block;
  font-size:11px;
  text-transform:uppercase;
  color: var(--muted);
}
.tla-forum-stat .value {
  font-size:18px;
  font-weight:600;
}

/* Groups */
.tla-forum-groups-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.tla-forum-groups-header h2 {
  font-size:22px;
}
.tla-forum-groups-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
}
.tla-forum-group-card {
  background: var(--card);
  border-radius:18px;
  padding:18px 18px 16px;
  border:1px solid var(--border);
  box-shadow:0 14px 30px rgba(0,0,0,0.55);
}
.tla-forum-group-card h3 {
  font-size:18px;
  margin-bottom:8px;
}
.tla-forum-group-card p {
  font-size:14px;
  color: var(--muted);
  margin-bottom:12px;
}
.tla-forum-group-meta {
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color: var(--muted);
  margin-bottom:10px;
}

/* Topics & Replies */
.tla-forum-topic-row {
  background: var(--card);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:10px;
  border:1px solid var(--border);
}
.tla-forum-topic-row h3 {
  margin:0 0 4px;
  font-size:16px;
}
.tla-forum-topic-row a {
  color:#fff;
  text-decoration:none;
}
.tla-forum-topic-row a:hover {
  text-decoration:underline;
}
.tla-forum-topic-meta {
  font-size:12px;
  color: var(--muted);
  display:flex;
  gap:16px;
}

.tla-reply {
  background: var(--card);
  border-radius:16px;
  padding:14px 16px;
  margin-bottom:10px;
  border:1px solid var(--border);
  display:flex;
  gap:14px;
}
.tla-reply-author .avatar img {
  border-radius:999px;
}
.tla-reply-author .meta {
  font-size:12px;
  color: var(--muted);
}
.tla-reply-author .name {
  display:block;
  font-size:14px;
  color:#fff;
}
.tla-reply-body {
  flex:1;
  font-size:14px;
}

/* Buttons */
.tla-btn-primary,
.tla-btn-secondary {
  display:inline-block;
  padding:9px 18px;
  border-radius:999px;
  font-size:13px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  color:#fff !important;
}
.tla-btn-primary {
  background-image:var(--flow);
  box-shadow:0 8px 18px rgba(0,0,0,0.5);
}
.tla-btn-secondary {
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.18);
}
.tla-btn-primary:hover,
.tla-btn-secondary:hover {
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,0.7);
  color:#fff !important;
}

/* Reply form */
.tla-reply-form textarea {
  width:100%;
  border-radius:12px;
  background:#05061b;
  border:1px solid var(--border);
  padding:10px;
  color:#fff;
  font-size:14px;
  resize:vertical;
}
.tla-reply-form-message {
  display:inline-block;
  margin-left:10px;
  font-size:12px;
}

/* CTA card for guests */
.tla-forum-cta-card {
  background: var(--card);
  border-radius:20px;
  padding:24px 20px;
  text-align:center;
  border:1px solid var(--border);
  box-shadow:0 18px 36px rgba(0,0,0,0.6);
}
.tla-forum-cta-card h2 {
  font-size:24px;
  margin-bottom:8px;
}
.tla-forum-cta-card p {
  color: var(--muted);
  font-size:14px;
  margin-bottom:16px;
}
.tla-forum-cta-buttons {
  display:flex;
  justify-content:center;
  gap:10px;
}

/* Badges */
.tla-badge {
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.tla-badge-locked {
  background:#df29d3;
  color:#fff;
}

/* User profile */
.tla-user-profile-header {
  display:flex;
  gap:16px;
  background: var(--card);
  border-radius:18px;
  padding:18px;
  border:1px solid var(--border);
  box-shadow:0 14px 30px rgba(0,0,0,0.55);
}
.tla-user-profile-header .avatar img {
  border-radius:999px;
}
.tla-user-profile-header .info h1 {
  font-size:24px;
  margin-bottom:4px;
}
.tla-user-profile-header .info .roles {
  font-size:12px;
  color:var(--muted);
}

/* Responsive */
@media (max-width: 768px) {
  .tla-forum-hero {
    padding:20px 16px;
  }
  .tla-forum-hero h1 {
    font-size:30px;
  }
  .tla-forum-hero-stats {
    flex-direction:column;
  }
  .tla-user-profile-header {
    flex-direction:column;
  }
}