:root{--bg:#f8f9fb;--card:#fff;--text:#111;--muted:#777;--border:#e6e8ec;}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text)}
.navbar{background:#fff;border-bottom:1px solid var(--border);padding:16px 40px;font-weight:600;position:sticky;top:0}
.container{max-width:1100px;margin:40px auto;padding:0 20px}
.feed-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px}
.thumbnail-card{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--border);transition:.2s}
.thumbnail-card:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(0,0,0,.05)}
.thumbnail-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;gap:30px;opacity:0;transition:.2s;color:#fff}
.thumbnail-card:hover .overlay{opacity:1}
.post-container{max-width:800px;margin:40px auto;padding:0 20px}
.post-image{width:100%;border-radius:14px;border:1px solid var(--border)}
.post-actions{display:flex;gap:20px;margin-top:15px}
.action-btn{cursor:pointer;color:var(--muted)}
.action-btn.liked{color:#e63946;font-weight:600}
.comments{margin-top:25px}
.comment{padding:8px 0;border-bottom:1px solid var(--border);font-size:14px}
.comment-form{margin-top:15px;display:flex;gap:10px}
.comment-form input{flex:1;padding:10px;border-radius:8px;border:1px solid var(--border)}
button{background:black;color:white;border:none;padding:10px 18px;border-radius:8px;cursor:pointer}