:root {
  --brand: #e26d5a;
  --brand-dark: #cf5a48;
  --surface: #ffffff;
  --surface-2: #f7f7f8;
  --text: #111315;
  --text-muted: #6b7280;
  --border: #e5e7eb;
  --radius: 12px;
  --shadow: 0 6px 24px rgba(0,0,0,0.08);
}

[data-theme="dark"] {
  --surface: #0c0f14;
  --surface-2: #0f141b;
  --text: #e5e7eb;
  --text-muted: #98a2b3;
  --border: #1f2937;
}

/* Bottom navigation (mobile) */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: var(--surface); border-top: 1px solid var(--border); display: none; z-index: 50; }
.bottom-nav__inner { max-width: 960px; margin: 0 auto; display: grid; grid-template-columns: repeat(5,1fr); height: 56px; }
.bottom-nav a { display: grid; place-items: center; color: var(--text); text-decoration: none; font-size: 12px; }
.bottom-nav .ico { width: 22px; height: 22px; display:inline-block; }

@media (max-width: 860px) {
  .bottom-nav { display: block; }
  main.container { padding-bottom: 72px; }
}

/* Feed cards */
.feed { display: grid; gap: 16px; }
.card-post { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.post-header { display:flex; align-items:center; gap:10px; padding: 10px 12px; }
.post-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.post-author { display:flex; flex-direction:column; }
.post-media { width: 100%; background: #000; display:block; }
.post-actions { display:flex; align-items:center; gap: 10px; padding: 8px 12px; }
.icon-btn { background: transparent; border: none; cursor: pointer; color: var(--text); }
.post-caption { padding: 0 12px 12px; color: var(--text); }
.badge-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }

/* Explore grid */
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.grid img, .grid video { width:100%; height: 160px; object-fit: cover; border-radius: 10px; }

/* Create form */
.uploader { display:grid; gap:10px; background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.uploader input[type="file"] { padding:8px; border:1px dashed var(--border); background: var(--surface-2); }
.uploader canvas { max-width: 100%; border-radius: 8px; }

/* Activity list */
.activity { display:grid; gap:10px; }
.activity .list-item { display:flex; align-items:center; justify-content:space-between; }