:root{ --wa-green:#25D366; --wa-dark:#075E54; --ink:#111; --muted:#6b7280; }
*{ box-sizing:border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; background:#f5f7f7; color:#111; }
header.topbar{ position:sticky; top:0; z-index:50; background:var(--wa-dark); color:white; padding:10px 14px; display:flex; align-items:center; gap:10px; }
.topbar h1{ font-size:18px; margin:0; }
.topbar a.btn{ margin-left:auto; background:#fff; color:var(--wa-dark); padding:6px 10px; border-radius:999px; text-decoration:none; font-weight:600; }
.container{ max-width:920px; margin:12px auto; padding:0 12px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; }
.card{ background:#fff; border-radius:16px; padding:12px; box-shadow:0 2px 10px rgba(0,0,0,.06); display:flex; gap:12px; }
.card img.thumb{ width:56px; height:56px; border-radius:12px; object-fit:cover; background:#e5e7eb; }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background:#e5f9ef; color:#166534; margin-right:6px; }
.badge.channel{ background:#e0ecff; color:#1e40af; }
.card h3{ margin:4px 0 2px; font-size:16px; }
.card p{ margin:2px 0; font-size:13px; color:var(--muted); }
.card .meta{ font-size:12px; color:#6b7280; }
.btn-join, .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 12px; background:var(--wa-green); color:#054; border:0; border-radius:12px; font-weight:700; text-decoration:none; }
.btn-join{ width:100%; }
.btn-outline{ background:#fff; border:1px solid #d1d5db; color:#111; }
footer.site{ background:#fff; color:#64748b; text-align:center; padding:22px; margin-top:24px; border-top:1px solid #e5e7eb; }
.searchbar{ display:flex; gap:8px; margin:10px 0 16px; }
.searchbar input, select{ flex:1; padding:10px 12px; border-radius:12px; border:1px solid #d1d5db; }
.nav-cats{ display:flex; gap:8px; overflow-x:auto; padding:8px 0; }
.nav-cats a{ white-space:nowrap; background:#fff; padding:8px 12px; border-radius:999px; text-decoration:none; color:#111; border:1px solid #e5e7eb; }
.pager{ display:flex; gap:8px; justify-content:center; margin:16px 0; }
.pager a{ padding:8px 12px; border:1px solid #d1d5db; border-radius:8px; text-decoration:none; color:#111; background:#fff; }
.form{ background:#fff; padding:14px; border-radius:16px; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.form .row{ display:grid; grid-template-columns:1fr; gap:10px; margin:8px 0; }
.form label{ font-weight:600; font-size:13px; color:#374151; }
.form input, .form textarea, .form select{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid #d1d5db; }
.alert{ padding:10px 12px; background:#fff8e1; border:1px solid #fde68a; border-radius:12px; color:#92400e; margin:10px 0; }
.table{ width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; }
.table th, .table td{ padding:10px; border-bottom:1px solid #e5e7eb; font-size:14px; }
.pin{ color:#f59e0b; font-weight:700; }

/* Mobile helpers */
@media (max-width: 480px){
  .card{ padding:10px; }
  .card img.thumb{ width:52px; height:52px; }
  .topbar h1{ font-size:16px; }
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: #075E54;
  color: white;
}

.topbar img {
  margin-right: 8px;
  vertical-align: middle;
}

.topbar h1 {
  flex-grow: 1;
  margin: 0 10px;
  font-size: 1.2rem;
}

.topbar .btn {
  background: white;
  color: #075E54;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
}

.back-btn {
  background: #128C7E;
  color: #fff;
}
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: white;            /* same color */
}

.brand img {
  margin-right: 8px;
}

.brand h1 {
  font-size: 1.2rem;
  margin: 0;
  color: inherit;          /* inherits white color from .brand */
}