*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',sans-serif;background:#09090b;color:#fafafa;line-height:1.6;-webkit-font-smoothing:antialiased}
.container{max-width:640px;margin:0 auto;padding:0 1rem}
.accent{color:#10b981}

/* Nav */
.navbar{position:sticky;top:0;z-index:50;background:rgba(9,9,11,.92);backdrop-filter:blur(16px);border-bottom:1px solid #1f2937}
.nav-content{display:flex;align-items:center;justify-content:space-between;height:56px}
.nav-brand{font-size:1.15rem;font-weight:700;color:#fafafa}
.nav-actions{display:flex;gap:.5rem;align-items:center}
.btn-nav{padding:.4rem 1rem;background:#1f2937;color:#fafafa;border:none;border-radius:8px;font-size:.8rem;font-weight:500;cursor:pointer;font-family:inherit;transition:background .2s}
.btn-nav:hover{background:#374151}

/* Tabs */
.tabs{display:flex;border-bottom:1px solid #1f2937;position:sticky;top:56px;z-index:40;background:rgba(9,9,11,.92);backdrop-filter:blur(16px)}
.tab{flex:1;padding:.85rem;text-align:center;background:none;border:none;color:#71717a;font-size:.9rem;font-weight:500;cursor:pointer;font-family:inherit;border-bottom:2px solid transparent;transition:all .2s}
.tab.active{color:#10b981;border-bottom-color:#10b981}
.tab:hover{color:#a1a1aa}

/* Feed */
.tab-content{padding:1rem 0}
.loading,.empty-state{text-align:center;padding:3rem 1rem;color:#71717a;font-size:.9rem}
.loading-sm{padding:1rem;color:#71717a;font-size:.8rem;text-align:center}

/* Post Card */
.post-card{background:#18181b;border:1px solid #27272a;border-radius:16px;margin-bottom:1rem;overflow:hidden;transition:border-color .2s}
.post-card:hover{border-color:#3f3f46}
.post-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1rem .5rem;gap:.75rem}
.post-user{display:flex;align-items:center;gap:.6rem;min-width:0}
.post-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#10b981,#06b6d4);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.post-username{font-weight:600;font-size:.85rem}
.post-location{font-size:.7rem;color:#71717a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.post-title{font-size:1.05rem;font-weight:700;padding:0 1rem;margin-bottom:.25rem}
.post-desc{font-size:.85rem;color:#a1a1aa;padding:0 1rem;margin-bottom:.5rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-images{position:relative;margin:.5rem 0}
.post-image{width:100%;height:300px;background-size:cover;background-position:center;background-color:#1f2937}
.img-count{position:absolute;top:.5rem;right:.5rem;background:rgba(0,0,0,.7);color:#fff;padding:.2rem .6rem;border-radius:10px;font-size:.7rem}
.post-image-placeholder{width:100%;height:200px;background:#1f2937;display:flex;align-items:center;justify-content:center;font-size:3rem;margin:.5rem 0}
.post-tags{padding:.25rem 1rem;display:flex;flex-wrap:wrap;gap:.3rem}
.tag{font-size:.7rem;color:#10b981;background:rgba(16,185,129,.1);padding:.15rem .5rem;border-radius:6px}

/* Actions */
.post-actions{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem 1rem}
.reaction-bar{display:flex;align-items:center;gap:.15rem}
.reaction-btn{background:none;border:none;font-size:1.25rem;cursor:pointer;padding:.25rem;border-radius:8px;transition:transform .15s,background .15s;opacity:.6}
.reaction-btn:hover,.reaction-btn.active{opacity:1;transform:scale(1.15)}
.reaction-btn.active{background:rgba(16,185,129,.1)}
.reaction-count{font-size:.75rem;color:#71717a;margin-left:.3rem;min-width:20px}
.comment-btn{background:none;border:none;font-size:.85rem;color:#71717a;cursor:pointer;padding:.25rem .5rem;border-radius:6px}
.comment-btn:hover{color:#a1a1aa;background:#27272a}

/* Comments */
.comments-section{padding:0 1rem 1rem;border-top:1px solid #27272a;margin:0 1rem}
.comment{padding:.5rem 0;font-size:.8rem;border-bottom:1px solid #1a1a1e}
.comment strong{color:#fafafa;margin-right:.4rem}
.comment-form{display:flex;gap:.5rem;margin-top:.5rem}
.comment-form input{flex:1;padding:.4rem .6rem;background:#27272a;border:1px solid #3f3f46;border-radius:8px;color:#fafafa;font-size:.8rem;font-family:inherit;outline:none}
.comment-form input:focus{border-color:#10b981}
.comment-form button{padding:.4rem .8rem;background:#10b981;color:#09090b;border:none;border-radius:8px;font-size:.75rem;font-weight:600;cursor:pointer;font-family:inherit}

/* Nearby */
.nearby-container{padding:0 1rem}
.search-box{display:flex;gap:.4rem;margin-bottom:.5rem}
.search-box input{flex:1;padding:.75rem 1rem;background:#18181b;border:1px solid #27272a;border-radius:12px;color:#fafafa;font-size:.9rem;font-family:inherit;outline:none}
.search-box input:focus{border-color:#10b981}
.search-box input::placeholder{color:#52525b}
.btn{padding:.65rem 1.25rem;border-radius:10px;font-size:.85rem;font-weight:600;border:none;cursor:pointer;font-family:inherit;transition:background .2s}
.btn-primary{background:#10b981;color:#09090b}
.btn-primary:hover{background:#059669}
.btn-gps{padding:.65rem .8rem;background:#18181b;border:1px solid #27272a;color:#fafafa;font-size:1.1rem;border-radius:12px;cursor:pointer}
.btn-gps:hover{border-color:#10b981}
.btn-ghost{background:transparent;color:#a1a1aa}
.btn-ghost:hover{background:#27272a}
.btn-full{width:100%;margin-top:.5rem}
.btn-sm{padding:.4rem .8rem;font-size:.75rem;border-radius:8px}
.btn-county{background:rgba(16,185,129,.1);color:#10b981;border:1px solid rgba(16,185,129,.2);cursor:pointer;font-family:inherit}
.btn-county:hover{background:rgba(16,185,129,.2)}
.search-status{font-size:.75rem;color:#71717a;text-align:center;margin:.5rem 0;min-height:1em}
.suggestions{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center}

/* Location bar */
.location-bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:#18181b;border:1px solid #27272a;border-radius:12px;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.location-info{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.current-city{font-size:1rem;font-weight:700}
.current-county{font-size:.75rem;color:#10b981;font-weight:500}

/* Badges */
.opp-badge{padding:.2rem .6rem;border-radius:10px;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}
.opp-badge.urgent{background:rgba(239,68,68,.15);color:#f87171}
.opp-badge.ongoing{background:rgba(16,185,129,.15);color:#10b981}
.opp-badge{background:rgba(99,102,241,.15);color:#818cf8}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;backdrop-filter:blur(4px)}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background:#18181b;border:1px solid #27272a;border-radius:16px;padding:1.5rem;width:90%;max-width:360px}
.modal h2{font-size:1.25rem;margin-bottom:1rem}
.input{width:100%;padding:.7rem .9rem;background:#27272a;border:1px solid #3f3f46;border-radius:10px;color:#fafafa;font-size:.85rem;font-family:inherit;outline:none;margin-bottom:.5rem}
.input:focus{border-color:#10b981}

/* Text */
.text-zinc-400{color:#a1a1aa}

@media(min-width:768px){.container{max-width:640px}}