body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f9f9f9}.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;background:#4caf50;color:#fff}.navbar-title{font-size:24px;font-weight:700}.navbar-actions{display:flex;align-items:center;gap:15px}.login-button,.logout-button{background:none;color:#fff;border:1px solid white;border-radius:3px;padding:5px 10px;font-size:14px;cursor:pointer;transition:all .3s ease}.login-button:hover,.logout-button:hover{background:#fff3}.login-button:focus,.logout-button:focus{outline:none;box-shadow:0 0 3px #ffffffb3}.post-list{margin-top:20px}.post{border:1px solid #ddd;border-radius:8px;padding:20px;background-color:#fff;margin-bottom:15px;box-shadow:0 2px 8px #0000001a;transition:transform .2s,box-shadow .2s;cursor:pointer}.post:hover{transform:translateY(-5px);box-shadow:0 4px 12px #00000026}.post-title{margin:0 0 10px;font-size:18px;font-weight:700}.post-text{margin:0 0 15px;font-size:16px;color:#555}.meta{font-size:14px;color:#888;margin-bottom:10px}.actions{display:flex;align-items:center;gap:15px}.like-button{background:none;border:none;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;width:50px;height:50px;border-radius:50%;transition:all .3s ease;position:relative}.like-button:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0000001a;border-radius:50%;opacity:0;z-index:0;transition:opacity .3s ease}.like-button:hover:before{opacity:1}.like-button svg{z-index:1;width:24px;height:24px;fill:#bbb;transition:fill .3s ease}.like-button.liked svg{fill:red}.like-count{z-index:1;font-size:14px;color:#555}.like-button.liked .like-count{color:red}.add-post-button{background-color:#4caf50;color:#fff;border:none;padding:10px 15px;border-radius:5px;cursor:pointer;margin-bottom:20px;font-size:16px;transition:background .3s ease}.add-post-button:hover{background-color:#45a049}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center;z-index:1000}.search-bar{width:100%;padding:10px;margin-bottom:20px;border:1px solid #ddd;border-radius:5px;box-sizing:border-box}.sort-dropdown{position:relative;display:inline-block;float:right}.flat-button{padding:5px 10px;background:none;color:#333;border:1px solid #ddd;border-radius:5px;font-size:14px;cursor:pointer}.flat-button:hover{background:#f0f0f0}.dropdown-menu{position:absolute;background:#fff;border:1px solid #ddd;border-radius:5px;padding:5px 0;top:40px;right:0;width:150px;box-shadow:0 4px 6px #0000001a}.dropdown-menu button{display:block;background:none;border:none;color:#000;padding:10px 15px;text-align:left;cursor:pointer;width:100%}.dropdown-menu button:hover{background:#f0f0f0}.container{max-width:800px;margin:0 auto;padding:20px}.post-details{border:1px solid #ddd;border-radius:5px;padding:15px;background-color:#fff;margin-bottom:20px;box-shadow:0 2px 5px #0000001a}.post-details h1{margin:0 0 10px}.post-details p{margin:0 0 10px;color:#555}.meta{font-size:14px;color:#777}.actions p{display:inline-block;margin-right:15px;font-size:16px;color:#777}.comments-section{margin-top:20px}.comments-section h2{margin-bottom:10px}.comment{border:1px solid #ddd;border-radius:5px;padding:10px;background-color:#fff;margin-bottom:10px}.comment p{margin:0 0 5px}.add-comment{margin-top:15px}.add-comment textarea{width:100%;height:60px;padding:10px;border:1px solid #ddd;border-radius:5px;resize:none;margin-bottom:10px}.add-comment button{background-color:#4caf50;color:#fff;border:none;padding:10px 15px;border-radius:5px;cursor:pointer}.add-comment button:hover{background-color:#45a049}.container{max-width:800px;margin:0 auto;padding:20px;background-color:#fff;border-radius:10px;box-shadow:0 4px 10px #0000001a}.back-button{background:none;border:1px solid #ddd;border-radius:5px;padding:5px 10px;cursor:pointer;margin-bottom:20px;font-size:16px}.back-button:hover{background-color:#f0f0f0}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;display:flex;justify-content:center;align-items:center}.modal-content{background:#fff;padding:20px;border-radius:10px;text-align:center;position:relative;max-width:400px;width:100%}.modal-close{position:absolute;top:10px;right:10px;background:transparent;border:none;font-size:20px;cursor:pointer}.comments-list{list-style:none;padding:0;margin:20px 0}.comment{padding:10px;border:1px solid #ddd;border-radius:5px;margin-bottom:10px;background:#f9f9f9}.comment-meta{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:14px;color:#555}.like-button{background:none;border:none;color:#555;font-size:16px;cursor:pointer}.like-button.liked{color:red}.add-comment-section{display:flex;align-items:center;gap:10px;margin-top:20px}.comment-input{flex:1;padding:10px;border:1px solid #ddd;border-radius:5px;font-size:16px}.add-comment-button{padding:10px 15px;background-color:#4caf50;color:#fff;border:none;border-radius:5px;cursor:pointer}.add-comment-button:hover{background-color:#45a049}.pagination{display:flex;justify-content:center;align-items:center;margin-top:20px;gap:15px}.pagination-button{padding:10px 15px;font-size:16px;border:1px solid #ddd;border-radius:5px;background-color:#fff;color:#333;cursor:pointer;transition:all .3s ease}.pagination-button.disabled{background-color:#f0f0f0;color:#bbb;cursor:not-allowed}.pagination-info{font-size:16px;color:#555}.comment-indicator{display:flex;align-items:center;gap:5px}.comment-icon{fill:currentColor;color:#555}.comment-count{font-size:16px;color:#555}.modal-content{background:#fff;padding:20px;border-radius:10px;text-align:center;position:relative;max-width:400px;width:100%;box-shadow:0 4px 10px #0003}.modal-title{font-size:20px;font-weight:700;margin-bottom:20px;color:#333}.modal-input,.modal-textarea{width:100%;padding:10px;margin-bottom:15px;border:1px solid #ddd;border-radius:5px;font-size:16px;box-sizing:border-box}.modal-textarea{resize:none;height:80px}.modal-submit-button{padding:10px 20px;font-size:16px;border:none;border-radius:5px;cursor:pointer;background-color:#4caf50;color:#fff;transition:background .3s ease}.modal-submit-button:hover{background-color:#45a049}.modal-close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:24px;color:#333;cursor:pointer;transition:color .3s ease}.modal-close:hover{color:#000}.auth-info{display:flex;align-items:center;gap:10px}.user-avatar{width:30px;height:30px;border-radius:50%}.auth-button{background-color:#4285f4;color:#fff;border:none;padding:10px 15px;border-radius:5px;font-size:14px;cursor:pointer;transition:background-color .3s ease}.auth-button:hover{background-color:#357ae8}