/* FAMILYHUB SOCIAL v1 - Matches your approved mockup */
:root {
  --green: #073b2c;
  --teal: #0b6b4f;
  --orange: #f28a19;
  --bg: #f8f9f7;
  --card: #ffffff;
  --text: #17352b;
  --muted: #6d7e76;
  --border: #e2ebe6;
  --shadow: 0 4px 20px rgba(7,59,44,0.08);
}

* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--text); min-height:100dvh; }

.top-nav { background:white; border-bottom:1px solid var(--border); padding:12px 16px; position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; }
.logo { font-weight:900; font-size:22px; color:var(--green); }
.logo span { color:var(--orange); }
.search { flex:1; max-width:420px; margin:0 16px; padding:10px 16px; border-radius:999px; background:#f1f3f2; border:none; }

.greeting { padding:20px 16px 10px; background:linear-gradient(135deg, var(--teal), var(--green)); color:white; border-radius:0 0 24px 24px; }
.greeting h1 { margin:0 0 4px; font-size:26px; }

.tabs { display:flex; background:white; border-bottom:1px solid var(--border); }
.tab { flex:1; padding:14px; text-align:center; font-weight:700; color:var(--muted); border-bottom:3px solid transparent; }
.tab.active { color:var(--green); border-bottom:3px solid var(--orange); }

.composer { background:white; border-radius:16px; padding:16px; margin:12px 16px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:center; }
.composer-avatar { width:42px; height:42px; border-radius:50%; background:var(--teal); color:white; display:grid; place-items:center; font-weight:bold; }
.composer-input { flex:1; padding:12px 18px; background:#f1f3f2; border-radius:999px; border:none; }

.post { background:white; border-radius:16px; margin:12px 16px; box-shadow:var(--shadow); overflow:hidden; }
.post-header { padding:14px; display:flex; gap:12px; align-items:center; }
.post-avatar { width:40px; height:40px; border-radius:50%; background:var(--teal); color:white; display:grid; place-items:center; font-weight:800; }
.post-content { padding:0 16px 12px; }
.post-actions { display:flex; justify-content:space-around; padding:12px 0; border-top:1px solid var(--border); color:var(--muted); font-size:22px; }

.pulse { background:white; margin:12px 16px; padding:16px; border-radius:16px; box-shadow:var(--shadow); }

.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; background:white; border-top:1px solid var(--border);
  display:grid; grid-template-columns:repeat(5,1fr); padding:8px 0 4px; z-index:200; box-shadow:0 -2px 10px rgba(0,0,0,.1);
}
.bottom-nav a { text-align:center; font-size:26px; color:var(--muted); }
.bottom-nav a.active { color:var(--teal); }
.bottom-nav .create {
  background:var(--orange); color:white; border-radius:50%; width:56px; height:56px; margin-top:-28px;
  box-shadow:0 4px 15px rgba(242,138,25,.4); font-size:32px; display:grid; place-items:center;
}

.connection-bar {
  background:linear-gradient(90deg, var(--green), var(--teal)); color:white; padding:10px 16px;
  display:flex; align-items:center; gap:10px; font-weight:700;
}

@media (max-width: 768px) { .bottom-nav { display:grid; } }