* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0b0b0e; color: #fff; font-family: system-ui; padding-bottom: 80px; transition: background 0.3s, color 0.3s; }
body[data-theme="light"] { background: #fff; color: #000; }

.top-bar { text-align: center; padding: 14px; border-bottom: 1px solid #222; }
.screen { display: none; padding: 20px; }
.screen.active { display: block; }

input, textarea { width: 100%; padding: 12px; margin: 10px 0; border: none; border-radius: 10px; color: inherit; background: #1b1b20; }
body[data-theme="light"] input, body[data-theme="light"] textarea { background: #f0f0f0; color: #000; }
textarea { height: 100px; resize: none; }

button { width: 100%; padding: 12px; border-radius: 10px; border: none; background: white; color: black; font-weight: 600; cursor: pointer; margin-top: 8px; }
button.ghost { background: transparent; border: 1px solid #333; color: inherit; }

.post, .reel { background: #15151a; border-radius: 14px; margin-bottom: 20px; overflow: hidden; }
body[data-theme="light"] .post, body[data-theme="light"] .reel { background: #f4f4f4; color: #000; }

.post img, .reel img { width: 100%; display: block; border-radius: 10px; }
.post .avatar, .reel .avatar { width: 40px; height: 40px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.post .avatar.big, .reel .avatar.big { width: 120px; height: 120px; margin: 10px auto; display: block; }

.post-header, .reel-header { display: flex; align-items: center; padding: 10px; font-weight: bold; }
.post-actions, .reel-actions { padding: 10px; cursor: pointer; font-size: 18px; display: flex; gap: 10px; }

.bottom-nav { position: fixed; bottom: 0; width: 100%; background-color: rgb(41, 41, 41); display: flex; justify-content: space-around; padding: 10px 0; border-top: 1px solid #222; }
body[data-theme="light"] .bottom-nav { background-color: #eee; border-top: 1px solid #ccc; }
.bottom-nav img { width: 26px; cursor: pointer; }
.avatar.big { display: block; margin: 10px auto; }