.App{display:flex;flex-direction:column;min-height:100vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.main-container{display:grid;grid-template-columns:250px 1fr 300px;gap:2rem;max-width:1400px;margin:0 auto;width:100%;padding:2rem}button{padding:.75rem 1.5rem;font-size:1rem;border-radius:25px;border:none;background:#667eea;color:#fff;cursor:pointer;font-weight:600;transition:all .3s ease}button:hover{background:#764ba2;transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}button:active{transform:translateY(0)}@media (max-width: 1200px){.main-container{grid-template-columns:200px 1fr 250px;gap:1rem;padding:1rem}}@media (max-width: 768px){.main-container{grid-template-columns:1fr;gap:1rem}}.header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:1rem 0;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px #0000001a}.header-container{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;padding:0 2rem;gap:2rem}.logo-section{flex-shrink:0}.logo{font-size:1.5rem;font-weight:700;letter-spacing:1px}.search-section{flex:1;display:flex;align-items:center;background:rgba(255,255,255,.2);border-radius:25px;padding:.5rem 1rem;max-width:400px}.search-input{flex:1;background:none;border:none;color:#fff;outline:none;font-size:.9rem}.search-input::placeholder{color:#ffffffb3}.search-btn{background:none;border:none;color:#fff;cursor:pointer;font-size:1rem}.header-actions{display:flex;align-items:center;gap:1.5rem}.notification-btn,.message-btn{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;position:relative;transition:transform .2s}.notification-btn:hover,.message-btn:hover{transform:scale(1.1)}.notification-badge{position:absolute;top:-8px;right:-8px;background:#ff4757;color:#fff;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}.user-menu{display:flex;align-items:center;gap:.5rem;cursor:pointer;padding:.5rem 1rem;background:rgba(255,255,255,.2);border-radius:20px;transition:background .2s}.user-menu:hover{background:rgba(255,255,255,.3)}.user-avatar{font-size:1.2rem}.user-name{font-size:.9rem;font-weight:500}@media (max-width: 768px){.header-container{flex-wrap:wrap;padding:0 1rem;gap:1rem}.search-section{max-width:100%;order:3;flex-basis:100%}.user-name{display:none}}.sidebar{width:250px;background:white;border-right:1px solid #e0e0e0;padding:1.5rem 0;position:sticky;top:70px;height:calc(100vh - 70px);overflow-y:auto;display:flex;flex-direction:column}.sidebar-nav{display:flex;flex-direction:column;gap:.5rem;padding:0 1rem}.nav-item{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:none;border:none;border-radius:8px;cursor:pointer;font-size:1rem;color:#333;transition:all .2s;text-align:left}.nav-item:hover{background:#f0f0f0}.nav-item.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;font-weight:600}.nav-icon{font-size:1.3rem;min-width:30px}.nav-label{font-weight:500}.compose-btn{margin:auto 1rem 1rem;width:calc(100% - 2rem);padding:.75rem 1.5rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:25px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.compose-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}@media (max-width: 768px){.sidebar{width:70px;padding:1rem 0}.nav-item{padding:.75rem;justify-content:center}.nav-label{display:none}.compose-btn{width:50px;height:50px;padding:0;display:flex;align-items:center;justify-content:center;margin:auto .5rem .5rem}}@media (max-width: 480px){.sidebar{display:none}}.post-card{background:white;border-bottom:1px solid #e0e0e0;padding:1rem;transition:background .2s;cursor:pointer}.post-card:hover{background:#f9f9f9}.post-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.post-author{display:flex;gap:.75rem}.author-avatar{font-size:2rem;flex-shrink:0}.author-info{display:flex;flex-direction:column;gap:.25rem}.author-name{margin:0;font-size:.95rem;font-weight:600;color:#333}.author-handle,.post-time{color:#999;font-size:.85rem}.more-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:.25rem .5rem;border-radius:50%;transition:background .2s}.more-btn:hover{background:#f0f0f0}.post-content{margin-bottom:1rem}.post-content p{margin:0 0 .75rem;color:#333;line-height:1.5}.post-image{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:8px;padding:2rem;text-align:center;font-size:3rem;margin-top:1rem}.post-stats{display:flex;gap:1rem;padding:.75rem 0;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;font-size:.85rem;color:#999;margin-bottom:.5rem}.post-stats span{cursor:pointer;transition:color .2s}.post-stats span:hover{color:#667eea}.post-actions{display:flex;justify-content:space-around;gap:.5rem}.action-btn{flex:1;padding:.5rem;background:none;border:none;color:#999;font-size:.9rem;cursor:pointer;border-radius:4px;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:.5rem}.action-btn:hover{background:rgba(102,126,234,.1);color:#667eea}.action-btn.liked{color:#ff4757}.action-btn.liked:hover{background:rgba(255,71,87,.1)}.comments-section{margin-top:1rem;padding-top:1rem;border-top:1px solid #e0e0e0}.comments-list{max-height:300px;overflow-y:auto;margin-bottom:1rem}.comment{display:flex;gap:.75rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid #f0f0f0}.comment:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.comment-avatar{font-size:1.5rem;flex-shrink:0}.comment-content{flex:1}.comment-header{display:flex;gap:.5rem;margin-bottom:.25rem;font-size:.85rem}.comment-header strong{color:#333}.comment-time{color:#999}.comment-content p{margin:0;color:#666;font-size:.9rem;line-height:1.4}.comment-input-section{display:flex;gap:.5rem}.comment-input{flex:1;padding:.5rem .75rem;border:1px solid #e0e0e0;border-radius:20px;font-size:.9rem;outline:none}.comment-input:focus{border-color:#667eea}.comment-submit-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:20px;cursor:pointer;font-weight:600;transition:transform .2s}.comment-submit-btn:hover:not(:disabled){transform:translateY(-2px)}.comment-submit-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.post-card{padding:.75rem}.post-stats{font-size:.8rem}.action-btn{padding:.4rem .25rem;font-size:.8rem}}.composer-box{background:white;border-radius:8px;margin:1rem;box-shadow:0 1px 3px #0000001a;overflow:hidden}.composer-header{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid #e0e0e0}.composer-avatar{font-size:2rem;flex-shrink:0}.composer-input{flex:1;background:none;border:none;outline:none;font-size:1rem;color:#333;cursor:text}.composer-input::placeholder{color:#999}.composer-expanded{padding:1rem;border-top:1px solid #e0e0e0;background:#f9f9f9}.composer-textarea{width:100%;min-height:100px;padding:1rem;border:1px solid #e0e0e0;border-radius:8px;font-size:1rem;font-family:inherit;resize:vertical;outline:none;color:#333}.composer-textarea::placeholder{color:#999}.composer-textarea:focus{border-color:#667eea}.composer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;gap:1rem}.action-buttons{display:flex;gap:.5rem}.action-btn{background:none;border:none;font-size:1.2rem;cursor:pointer;padding:.5rem;border-radius:50%;transition:background .2s}.action-btn:hover{background:rgba(102,126,234,.1)}.post-buttons{display:flex;gap:.5rem}.cancel-btn,.post-btn{padding:.5rem 1.5rem;border:none;border-radius:20px;font-weight:600;cursor:pointer;transition:all .2s}.cancel-btn{background:#e0e0e0;color:#333}.cancel-btn:hover{background:#d0d0d0}.post-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}.post-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.post-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.composer-box{margin:.5rem;border-radius:4px}.composer-header,.composer-expanded{padding:.75rem}}.feed{flex:1;background:#f5f5f5;overflow-y:auto;border-right:1px solid #e0e0e0}.feed-content{max-width:600px;margin:0 auto}.posts-container{display:flex;flex-direction:column;gap:1rem;padding:1rem 0}.explore-content{padding:2rem;max-width:600px;margin:0 auto}.explore-content h2{margin-bottom:2rem;color:#333}.trending-list{display:flex;flex-direction:column;gap:1rem}.trending-item{background:white;padding:1rem;border-radius:8px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transition:background .2s}.trending-item:hover{background:#f5f5f5}.trend-info h3{margin:0;color:#333;font-size:1rem}.trend-info p{margin:.25rem 0 0;color:#999;font-size:.85rem}.follow-trend{background:none;border:none;font-size:1.5rem;cursor:pointer}.profile-content{max-width:600px;margin:0 auto}.profile-header{background:white;margin-bottom:1rem}.profile-banner{height:200px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;font-size:4rem}.profile-info{padding:2rem}.profile-info h1{margin:0 0 .5rem;color:#333}.username{color:#999;margin:0 0 1rem}.bio{color:#666;margin:0 0 1.5rem}.profile-stats{display:flex;gap:2rem}.stat{display:flex;flex-direction:column}.stat strong{font-size:1.3rem;color:#333}.stat span{color:#999;font-size:.85rem}.my-posts{padding:2rem 0}.my-posts h2{padding:0 1rem;margin-bottom:1rem;color:#333}@media (max-width: 768px){.feed{border-right:none}.profile-banner{height:150px;font-size:3rem}.profile-info{padding:1.5rem}.profile-stats{gap:1rem}}.profile-panel{width:300px;background:white;padding:1.5rem;border-left:1px solid #e0e0e0;height:calc(100vh - 70px);overflow-y:auto;position:sticky;top:70px}.panel-section{margin-bottom:2rem}.panel-section h3{margin:0 0 1rem;color:#333;font-size:1.1rem}.suggested-users{display:flex;flex-direction:column;gap:1rem}.suggested-user{padding:0}.user-card{display:flex;align-items:center;gap:.75rem;padding:.75rem;background:#f5f5f5;border-radius:8px;transition:background .2s}.user-card:hover{background:#efefef}.user-avatar{font-size:2rem;flex-shrink:0}.user-details{flex:1;min-width:0}.user-name{margin:0;font-size:.9rem;font-weight:600;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-handle{margin:.25rem 0 0;font-size:.8rem;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.follow-btn{padding:.4rem .8rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;border:none;border-radius:20px;font-size:.8rem;font-weight:600;cursor:pointer;transition:transform .2s;flex-shrink:0}.follow-btn:hover{transform:translateY(-2px)}.trending-box{display:flex;flex-direction:column;gap:1rem}.trend-item{padding:1rem;background:#f5f5f5;border-radius:8px;cursor:pointer;transition:background .2s}.trend-item:hover{background:#efefef}.trend-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.trend-category{font-size:.8rem;color:#999;font-weight:500}.trend-menu{cursor:pointer;color:#999;font-size:1rem}.trend-item h4{margin:0 0 .5rem;color:#333;font-size:.95rem}.trend-item p{margin:0;color:#999;font-size:.85rem}.news-box{display:flex;flex-direction:column;gap:.75rem}.news-item{padding:.75rem;background:#f5f5f5;border-radius:8px;cursor:pointer;transition:background .2s}.news-item:hover{background:#efefef}.news-item p{margin:0;color:#333;font-size:.9rem;line-height:1.4}@media (max-width: 1200px){.profile-panel{width:250px;padding:1rem}.panel-section{margin-bottom:1.5rem}}@media (max-width: 1024px){.profile-panel{display:none}}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}