/* Dark theme for Kajiado360 */
:root {
  --bg1: #050816;
  --bg2: #0b1330;
  --accent: #7aa2ff;
  --muted: #aab2d6;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1rem;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}

.brand {
  display:flex;
  align-items:center;
  gap:0.8rem;
}

.logo {
  width:48px;
  height:48px;
  border-radius:8px;
  background: linear-gradient(45deg,#1f1836,#3b2b63);
  padding:6px;
}

.site-header h1 { margin:0; font-size:1.2rem; color:var(--accent); }
.tag { margin:0; font-size:0.85rem; color:var(--muted) }

.meta { text-align:right; font-size:0.85rem; color:var(--muted); display:flex; gap:0.6rem; align-items:center; }
#refreshBtn {
  background:transparent;
  border:1px solid rgba(255,255,255,0.07);
  color:var(--muted);
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
}

.container { padding:1rem; max-width:1100px; margin: 1.2rem auto; }

/* Tabs */
.tabs { display:flex; gap:0.6rem; justify-content:center; margin-bottom:1rem; flex-wrap:wrap; }
.tab {
  padding:0.5rem 0.9rem;
  background: rgba(255,255,255,0.03);
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.03);
  cursor:pointer;
  color:var(--muted);
}
.tab.active { background: linear-gradient(90deg,#0f2a5b,#4b2b6a); color:var(--accent); box-shadow:0 6px 18px rgba(0,0,0,0.5); }

/* Feeds */
.feed { display:none; justify-content:center; }
.feed.active { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.feed h2 { margin:0 0 0.4rem 0; color:var(--accent); }

.fb-page, .fb-post { width:100% !important; max-width:700px; background:rgba(255,255,255,0.02); padding:12px; border-radius:12px; box-shadow:0 10px 30px rgba(2,6,23,0.6); }

/* Footer */
.site-footer { text-align:center; color:var(--muted); padding:1.2rem 0; font-size:0.85rem; opacity:0.9; }

/* Responsive */
@media (max-width:720px) {
  .container { padding:0.6rem; }
  .site-header { flex-direction:column; align-items:flex-start; gap:0.6rem; }
  .meta { align-self:flex-end; }
  .fb-page { max-width:100%; padding:8px; }
}